web-dev-qa-db-ja.com

angular5で機能しないメタタグの追加/更新

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にインポートされたメタサービス

しかし、それは機能していません（私のページソースではありません）誰かが私を助けてくれますか？

ありがとう

javascriptangularangular5
16
kamalav

変更する必要があります：

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

WORKING DEMO（inspect要素を使用してページのソースを表示する代わりに）理由を以下に説明します

あなたの方法も100％うまく機能しています、あなたは私の与えられたデモでそれをチェックすることができます。

Angularはサーバー側からは提供されません。そのため、ページビューのソースを介してメタタグを表示できます。ページの読み込み後に変更され、ページビューのソースには表示されません。

更新されたメタタグを確認する場合は、要素を調べてそこを確認する必要があります

サーバー側のレンダリングが必要な場合は、Angular Universalを選択できます

16
Vivek Doshi

このテンプレートを使用してみてください

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';
}

その他の更新については rl を参照してください

3
deepak thomas

addTagsを使用するだけです。 updateTagsは既存のタグ用です。

AddTagsだけで

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

次のものを取得します。

enter image description here

さらにupdateTagを使用すると、説明の変更に注意してください。

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'}）;

enter image description here

1
bhantol

Angularには、index.htmlファイルで提供されるページコンテンツのみを表示するセキュリティ機能があります。これを表示する1つの方法は、同じページでコードを検査することです。メタタグとその値を確認できます。別の解決策は、SEOの目的に役立つ Angular Universal を使用することです。 Angular Universalを使用すると、ソースを表示してページコンテンツを表示できます。

0
parth