角度2：如何从组件（如标题服务）动态添加和更新meta标签

Question

我是Angular 2的新手，我需要设置像og：description之类的meta标签，并且全部来自组件。 我不知道如何动态更新元标记，也不能从特定组件向index.html添加新标记。

请帮忙。

PS：我读了有关标题服务的信息，但这只是为了更新标题。

Answer 1

首先在您的组件中导入Meta服务

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

把它放在构造函数中

constructor(private Meta:Meta){}

使用服务：

this.Meta.addTag({ name: 'yourmetaname', content: 'yourmetacontent' });

您可以在官方DOCS中查找更多信息：

https://angular.io/docs/ts/latest/api/platform-b​​rowser/index/Meta-class.html

Answer 2

在Angular4-beta.0中 ，添加了Meta服务，该服务允许您添加/删除元标签。

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

constructor(private meta:Meta) {
  meta.addTag(...)
}

有关更多详细信息，请参见

• https://angular.io/api/platform-b​​rowser/Meta
• https://github.com/angular/angular/pull/12322/files#diff-7979e98d95c45d21e56cf2602244f220R36

Answer 3

在Angular 4中，您可以轻松更新网页标题和元标记信息。

1. 将预定义的元服务导入组件中。

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

2. 在构造函数中注入服务。

constructor(private title: Title, private meta: Meta) {} 

3. 使用setTitle和updateTag在ngOnInit（）中添加标题和元标记

 ngOnInit(){    
        this.title.setTitle('Angular Overview');    
        this.meta.updateTag({ name:'author',content:'angulartpoint.com'});    
        this.meta.updateTag({name:'keyword',content:'angular overview, features'});    
        this.meta.updateTag({name:'description',content:'It contains overview of angular application'});    
    }

4. 在浏览器中检查head标签。
   在此处输入图片说明