Angular 2：如何从组件动态添加和更新元标记（如标题服务）答案

【问题标题】：Angular 2: How to add and update the meta tags dynamically from a component (like title service)Angular 2：如何从组件动态添加和更新元标记（如标题服务）
【发布时间】：2017-07-03 17:11:48
【问题描述】：

我是 Angular 2 的新手。我需要设置元标记，例如 og: description 和所有来自组件的标记。我不知道如何动态更新元标记，以及从特定组件向 index.html 添加新标记。

请帮忙。

PS：我看了标题服务，但那只是更新标题。

【问题讨论】：

stackoverflow.com/questions/16119398/…
我的问题仅与角度 2 有关。我想知道如何在 Angular 2 中完成这件事。
对不起，我的错，我应该使用stackoverflow.com/questions/40536237/…

标签： angular

【解决方案1】：

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

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

把它放在构造函数中

constructor(private Meta:Meta){}

使用服务：

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

【讨论】：

嗨，Shanti，你能帮我stackoverflow.com/questions/52781566/…

【解决方案2】：

在Angular4-beta.0 中添加了一个Meta 服务，允许您添加/删除元标记

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

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

更多详情见

【讨论】：

我可以使用 Meta 服务在 index.html 中设置标签，但是当我在 facebook 或社交媒体上分享 url 时，它没有显示 meta 标签。如果我直接将元标签放在 index.html 中，它的显示标签。那么如何在社交媒体中显示动态标签？
可能只能通过静态添加它们。我不知道 Facebook 是如何以及何时读取标签的，但它看起来就像在 Angular 添加它们之前一样。
感谢您的回复。我听说过服务器端渲染，我的项目使用 angular 和 spring rest API。那么有什么方法可以将它用于元标记？
对不起，我不知道服务器端渲染。不过，我希望它更适合您的用例。
@NazirAhmed 应该没有必要这样做public

【解决方案3】：

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

在您的组件中导入预定义的元服务。

从 '@angular/platform-browser' 导入 { Meta, Title }；
在构造函数中注入服务。

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

使用 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'});    
    }

在浏览器中检查 head 标签。

【讨论】：

嗨，Sachin，你能帮我stackoverflow.com/questions/52781566/…