Angular 通用 5 - 元服务不工作

Question

我的元标记适用于 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 });
   ...
   }

Answer 1

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

Answer 2

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

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

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

注意 updateTag 确实将元添加到 dom 如果它不存在

Angular 通用 5 - 元服务不工作

Angular Universal 5 - Meta Service not working

angular-universal

angular