Angular 2:如何从组件动态添加和更新元标记(如标题服务)

Question

我是Angular 2的新手.我需要设置元标记,如og:description和所有来自组件.我不知道如何动态更新元标记,还要从特定组件向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. 在组件中导入预定义的Meta Service.

 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标签.
   在此输入图像描述