简介
Angel的Meta service允许您根据应用程序中当前的活动路线获取或设置不同的`meta‘标签。
<$>[备注] 注意： 角度4及更大版本支持角度Meta服务。 <$>
让我们来看看它的用法和可用的方法。
前提条件
如果你想跟随这篇文章，你将需要：
本教程已使用Node v16.2.0、npm v7.15.1和angular v12.0.3进行了验证。
使用addTag和addTags
使用Meta服务需要从@Angel/Platform-Browser导入并注入到组件或服务中。
1import { Meta } from '@angular/platform-browser';
如果有多个meta标签，可以使用addTags方法在同一个调用中设置它们。
下面是一个在加载组件时为Twitter卡添加meta标签的示例：
1constructor(private meta: Meta) {
2 this.meta.addTags([
3 { name: 'twitter:card', content: 'summary_large_image' },
4 { name: 'twitter:site', content: '@alligatorio' },
5 // ...
6 ]);
7}
此代码将在页面中产生以下结果：
1[secondary_label Output]
2<meta name="twitter:card" content="summary_large_image">
3<meta name="twitter:site" content="@alligatorio">
请注意，addTag和addTags都可以使用第二个布尔参数来指示是否应该创建标记，即使它已经存在。
例如，此处将添加两次标记：
1constructor(private meta: Meta) {
2 this.meta.addTags([
3 { name: 'twitter:site', content: '@alligatorio' },
4 { name: 'twitter:site', content: '@alligatorio' }
5 ], true);
6 }
7}
此代码将在页面中产生以下结果：
1[secondary_label Output]
2<meta name="twitter:site" content="@alligatorio">
3<meta name="twitter:site" content="@alligatorio">
addTag和addTags允许您添加新的meta标签。
使用getTag和getTags
类似于addTag和addTags方法，还有getTag和getTags方法。
考虑具有以下meta标签的应用程序：
1<meta name="viewport" content="width=device-width, initial-scale=1">
以下是getTag的使用示例：
1constructor(private meta: Meta) {
2 const viewport = this.meta.getTag('name=viewport');
3 if (viewport) console.log(viewport.content);
4}
内容将输出到控制台。
1[secondary_label Output]
2width=device-width, initial-scale=1
getTag获取属性选择器字符串，返回HTMLMetaElement。getTags也接受属性选择器，但返回一个数组，该数组可能有多个与选择器匹配的HTMLMetaElements。
使用updateTag
给出一个新的meta标记定义和一个选择器，updateTag方法将更新与选择器匹配的任何标记。
在下面这个有点做作的例子中，我们首先设置了一个meta标签，其content为摘要_LARGE_IMAGE，然后将其更新为摘要：
1constructor(private meta: Meta) {
2 this.meta.addTag(
3 { name: 'twitter:card', content: 'summary_large_image' }
4 );
5
6 this.meta.updateTag(
7 { name: 'twitter:card', content: 'summary' },
8 `name='twitter:card'`
9 );
10}
在真正的应用程序中，你可能会想要更新应用程序中全局存在的`meta‘标签，但这应该根据活动路线的不同而采用不同的值。
使用emoveTag和emoveTagElement
emoveTag方法获取属性选择器的字符串，并移除标签。
考虑具有以下meta标签的应用程序：
1<meta charset="utf-8">
这并不是说你想这样做，但以下是你如何删除charset``meta标签的方法：
1constructor(private meta: Meta) {
2 this.meta.removeTag('charset');
3}
emoveTagElement类似，但不是字符串选择器，而是直接获取HTMLTagElement。
下面是相同的示例，但这里我们首先获取charset``meta标记元素：
1constructor(private meta: Meta) {
2 const charsetTag = this.meta.getTag('charset');
3 if (charsetTag) this.meta.removeTagElement(charsetTag);
4}
这两种方法都将删除meta元素。
结论
在本文中，您了解了如何使用Angel的Meta服务来获取、添加、更新和删除meta标签。
继续学习我们关于使用ngrx[以声明方式更新页面标题]的指南(https://andsky.com/tech/tutorials/angular-title-updater)。