添加/更新不在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"' );

工作演示 （而不是通過檢查元素查看頁面源檢查）原因解釋如下

您的方法也可以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';
}

請參閱網址以獲取更多更新

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'，內容：'talkingdotnet'}，{name：'keywords'，內容： 'Angular，Meta Service'}]）;

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

Answer 4

Angular具有安全功能，僅顯示index.html文件中提供的頁面內容。 查看此方法的一種方法是在同一頁面上檢查您的代碼。 您將能夠看到元標記及其值。 另一種解決方案是使用Angular Universal ，它對SEO目的很有用。 通過使用Angular universal，您將能夠在視圖源中看到您的頁面內容。