Angular Universal 5 - 元服务不工作答案

【问题标题】：Angular Universal 5 - Meta Service not workingAngular Universal 5 - 元服务不工作
【发布时间】：2018-09-12 10:02:33
【问题描述】：

我的元标签可以在 Facebook 和 Twitter 上使用，但不知何故我破坏了它们。我查看了示例，但看不到问题所在。（没有错误。）标签只是不会更改 index.html 中的默认值。我正在使用 Angular Universal 5。

与我找到的示例不同，我没有在构造函数中编写标签。不确定这是否是一个因素。我一定错过了使用 Meta 服务的一些规则。这是代码...

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

    constructor( ... private metaService: Meta ... ) {}

    ngOnInit () { 
    ...  

        // <!-- Facebook meta data -->
        this.metaService.addTags([
         {property: 'og:title', content: 'test' },
         {property: 'og:url', content: 'url' },
        ]);
        // <!-- Twitter meta data -->
        this.metaService.addTag({name: 'twitter:title', content: 'test });
   ...
   }

【问题讨论】：

它不需要在构造函数中。如果您尝试使用 updateTag 而不是 addTag 会怎样？
@大卫谢谢！ updateTag 有效。我在颤抖……我一定是通过更改 index.html 中的默认（静态）标签来破坏它。

标签： angular angular-universal

【解决方案1】：

如果标签已经存在，则需要使用updateTag 而不是addTag

查看源代码，addTag 不会添加元标记，如果它已经存在于 dom 中（如 index.html 中）

https://github.com/angular/angular/blob/master/packages/platform-browser/src/browser/meta.ts

注意 updateTag 确实将元数据添加到 dom 中（如果它尚不存在）

【讨论】：

【解决方案2】：

正如@David 建议的那样，从addTag（和addTags）切换到updateTag 解决了这个问题。

【讨论】：