adding/updating 元标记在 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' 
 });
  }

在应用模块中导入元服务

但是它不起作用（不在我的页面源代码中）。谁能帮帮我

谢谢

Answer 1

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

Answer 2

您只需更改：

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

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

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

Angular is not served from server side , that's why you can see any meta tags via page view source , any thing that is being changed after page loads that won't be shown in page view source

If you want to check the updated meta tags you need to inspect element and check there

If you want to server side rendering then you can go for Angular Universal

Answer 3

请尝试使用此模板

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 4

只需使用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([ {名称：'description'，内容：'How to use Angular 4 meta service'}， {名称：'author'，内容：'talkingdotnet'}， {名称：'keywords'，内容：'Angular, Meta Service'} ]);

this.meta.updateTag({名称:'description',内容:'Angular 4 meta service'});

adding/updating 元标记在 angular5 中不起作用

adding/updating meta tags not working in angular5

javascript

angular

angular5