介绍

Angular 的Meta 服务允许您meta根据应用程序中当前的活动路由获取或设置不同的标签。

注意： Angular Meta 服务可用于 Angular 4 及更高版本。

让我们回顾一下它的使用和可用的方法。

先决条件

如果你想跟随这篇文章，你需要：

• 对HTMLmeta元素有一定的了解。
• 对Angular 服务有一定的了解。

本教程已通过 Node v16.2.0、npmv7.15.1 和angularv12.0.3 验证。

使用addTag和addTags

使用 Meta 服务需要从@angular/platform-browser组件或服务中导入和注入它。

import { Meta } from '@angular/platform-browser';

对于多个meta标签，您可以使用该addTags方法在同一个调用中将它们全部设置。

这是我们在meta加载组件时为 Twitter 卡片添加标签的示例：

constructor(private meta: Meta) {
  this.meta.addTags([
    { name: 'twitter:card', content: 'summary_large_image' },
    { name: 'twitter:site', content: '@alligatorio' },
    // ...
  ]);
}

此代码将在页面中产生以下结果：

Output
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@alligatorio">

请注意，addTag和addTags都可以使用第二个布尔参数来指示是否应该创建标签，即使它已经存在。

例如，这里的标签将被添加两次：

constructor(private meta: Meta) {
    this.meta.addTags([
      { name: 'twitter:site', content: '@alligatorio' },
      { name: 'twitter:site', content: '@alligatorio' }
    ], true);
  }
}

此代码将在页面中产生以下结果：

Output
<meta name="twitter:site" content="@alligatorio">
<meta name="twitter:site" content="@alligatorio">

addTag并addTags允许您添加新meta标签。

使用getTag和getTags

与addTagandaddTags方法类似，还有getTagandgetTags方法。

考虑具有以下meta标记的应用程序：

<meta name="viewport" content="width=device-width, initial-scale=1">

以下是如何getTag使用的示例：

constructor(private meta: Meta) {
  const viewport = this.meta.getTag('name=viewport');
  if (viewport) console.log(viewport.content);
}

内容将输出到控制台。

Output
width=device-width, initial-scale=1

getTag接受一个属性选择器字符串并返回一个HTMLMetaElement. getTags也接受一个属性选择器，但返回一个可能有多个HTMLMetaElements匹配选择器的数组。

使用 updateTag

给定一个新的meta标签定义和一个选择器，该updateTag方法将更新与选择器匹配的任何标签。

在下面有点人为的例子中，我们首先设置一个meta带有contentof的标签，summary_large_image然后将其更新为 just summary：

constructor(private meta: Meta) {
  this.meta.addTag(
    { name: 'twitter:card', content: 'summary_large_image' }
  );

  this.meta.updateTag(
    { name: 'twitter:card', content: 'summary' },
    `name='twitter:card'`
  );
}

在真实的应用程序中，您可能希望更新meta应用程序中全局存在的标签，但这应该根据活动路由采用不同的值。

使用removeTag和removeTagElement

该removeTag方法采用属性选择器的字符串并删除标记。

考虑具有以下meta标记的应用程序：

<meta charset="utf-8">

并不是说您想这样做，但您可以通过以下方式删除charset meta标签：

constructor(private meta: Meta) {
  this.meta.removeTag('charset');
}

的removeTagElement是相似的，而是需要一个HTMLTagElement而不是直接的字符串选择的。

这是相同的示例，但在这里我们首先获取charset meta标签元素：

constructor(private meta: Meta) {
  const charsetTag = this.meta.getTag('charset');
  if (charsetTag) this.meta.removeTagElement(charsetTag);
}

这两种方法都将删除meta元素。

结论

在本文中，您学习了如何使用 Angular 的 Meta 服务来获取、添加、更新和删除meta标签。

继续与我们的指导你的学习更新页面标题声明使用ngrx。