添加/更新元标记在 angular5 中不起作用

Question

我使用下面的代码在运行时在 angular5 中添加或更新元标记

import { Title ,Meta} from '@angular/platform-browser'; 
constructor( private meta:Meta)
 {
 this.meta.addTags([
            {name: 'description', content: 'How to use Angular 4 meta 
       service'},
            {name: 'author', content: 'talkingdotnet'},
            {name: 'keywords', content: 'Angular, Meta Service'}
          ]);
this.meta.updateTag({ name: 'description', content: 'Angular 4 meta service' 
 });
  }

在 appmodule 中导入元服务

但它不起作用（不在我的页面源中）。任何人都可以帮助我

谢谢

Answer 1

你只需要改变：

this.meta.updateTag({ content: 'Angular 4 meta service'} , 'name="description"' );

WORKING DEMO（而不是通过inspect元素查看页面源代码）原因解释如下

您的方法也可以 100% 正常工作，您可以在我给定的演示中进行检查。

---

Angular 不是从服务器端提供的，这就是为什么你可以看到任何 通过页面查看源的元标记，页面加载后正在更改的任何内容都不会显示在页面查看源中

如果你想检查更新的元标记，你需要检查元素 并在那里检查

如果你想要服务器端渲染，那么你可以选择 Angular Universal

Answer 2

请尝试使用此模板

import { Component } from '@angular/core';
import { Title, Meta, MetaDefinition } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public constructor(public meta: Meta, public pageTitle: Title) {
    pageTitle.setTitle("MySite.COM");
    const keywords: MetaDefinition = {
      name: "keywords",
      content: "angular2, java, javaEE, angular-universal"
    }
    const description: MetaDefinition = {
      name: "description",
      content: "This is a description"
    }
    this.meta.addTags([keywords, description]);
  }

  title = 'app';
}

更多更新请参考url

Answer 3

只需使用addTags。 updateTags 用于现有标签。

只需添加标签

this.meta.addTags([
  {name: 'description', content: 'How to use Angular 4 meta service'},
  {name: 'author', content: 'talkingdotnet'},
  {name: 'keywords', content: 'Angular, Meta Service'}
]);

你会得到以下结果：

进一步与 updateTag 通知描述更改：

this.meta.addTags([ {name: 'description', content: '如何使用 Angular 4 元服务'}, {名称：'作者'，内容：'talkingdotnet'}， {名称：'关键字'，内容：'Angular，元服务'} ]);

this.meta.updateTag({ name: 'description', content: 'Angular 4 meta service'});

Answer 4

Angular 有一个安全特性，它只会显示 index.html 文件中提供的页面内容。查看此内容的一种方法是在同一页面上检查您的代码。您将能够看到您的元标记及其值。 另一个解决方案是使用Angular Universal，这对 SEO 很有用。通过使用 Angular 通用，您将能够在查看源代码中看到您的页面内容。