Angular Universal 5 - 元服务不工作 [英] Angular Universal 5 - Meta Service not working

问题描述

我的元标记适用于 Facebook 和 Twitter，但我不知何故破坏了它们.我查看了示例，但看不到问题所在.(没有错误.)标签只是没有从 index.html 中的默认值改变.我使用的是 Angular Universal 5.

I had my meta tags working for Facebook and Twitter but I've somehow broken them. I looked at examples, but I can't see the issue. (There are no errors.) The tags just don't change from the defaults in index.html. I'm using Angular Universal 5.

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

Unlike the examples I found, I'm not writing the tags in the constructor. Not sure if that's a factor. I must be missing some rule of using the Meta service. Here's the code...

    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

If the tags are already there, you need to use updateTag instead of addTag

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

Looking at the source code, addTag does not add the meta tag if it's already present in the dom (like in index.html)

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

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

Note updateTag does add the meta to the dom if it does not already exists

这篇关于Angular Universal 5 - 元服务不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！