添加/更新不在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 （而不是通过检查元素查看页面源检查）原因如下所述

你的方法也正常工作，你可以在我给出的演示中检查它。

  

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元服务'}，   {name：'author'，content：'talkingdotnet'}，   {name：'keywords'，content：'Angular，Meta Service'} ]）;

this.meta.updateTag（{name：'description'，content：'Angular 4 meta service'}）;

Answer 4

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