Angular Universal 5 - Meta Service无效

Question

我的meta标签适用于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

如果代码已经存在，则需要使用updateTag代替addTag

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

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

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

Answer 2

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