如何从 angular 应用程序动态添加/删除/更新元标记

Question

我创建了一个MetaService ，它将通过获取 API 创建所有元标记。

下面是代码，

  public addMetaTags(seoData): void {
    this.meta.addTag({ name: 'description', content: 'example description' });
    this.meta.addTag({ property: 'og:title', content: 'example title' });
    this.meta.addTag({ property: 'og:description', content: 'example og:description' });
    this.meta.addTag({ property: 'og:site_name', content: 'example og:site_name' });
  }

但问题是，当我从页面 A 导航到页面 B 时。已创建的标签未清除。

如何检查 MetaTag 是否已经创建并相应地更新它们？

Answer 1

这是文档： https://angular.io/api/platform-browser/Meta

你可以调用this.meta.getTag(key)来检查。

你可以这样做来更新：

this.meta.updateTag({ itemprop: 'name', content: subject });
this.meta.updateTag({ itemprop: 'description', content: desc });
this.meta.updateTag({ name: 'twitter:title', content: subject });
this.meta.updateTag({ name: 'twitter:description', content: desc });
this.meta.updateTag({ property: 'og:title', content: subject });
this.meta.updateTag({ property: 'og:description', content: desc });

如果您的应用应用了 SSR 功能，您可能不需要 updateTag，也不需要在客户端更新标签。