Angular4でダイナミックメタデータを追加するには

Question

私はSEOの動的メタデータを必要とするangular4ブログアプリを持っています。 Myサービス（BlogService）は、PHPサーバーからJSONデータを配信します。例：

{"ID":"168","title":"HTML Src Test","description":"testing the html thingy in angular","content":"<h1>Hello, World ... This is a heading.<\/h1>\n<p><img title=\"test\" src=\"https:\/\/i.stack.imgur.com\/ipOIT.png\" alt=\"test\" width=\"20%\" \/><\/p>\n<pre class=\"prettyprint\">code code <br \/>function(){<br \/>console.log(\"hello\");<br \/>alert(\"hello\");<br \/>}<\/pre>\n<p>&nbsp;<\/p>","date":"26th Apr 2017","slug":"html-src-test","imagepath":"","category":"Testy Test McTest","ttr":1,"comcount":0} 

これは次に解釈され（例えば {{post.titleを}}）通常の角のように表示される

BlogService：

getPost(slug: string): Promise<Post> { 
     const url = `${this.blogUrl}?id=${slug}`; 
     console.log(this.http.get(url).toPromise().then(response => response.json())); 

     return this.http.get(url) 
      .toPromise() 
      .then(response => response.json() as Post) 
      .catch(this.handleError); 
    } 

BlogpostComponent：

ngOnInit(): void { 
    this.getData(); 
} 
getData() { 
    this.route.params 
     .switchMap((params: Params) => this.service.getPost(params['slug'])) 
     .subscribe(post => this.post = post); 
} 

このhttpリクエストからデータを渡してHTMLのメタタグに表示するには？

おかげ

Answer 1

は、これは、我々がこれは我々がV4の+を使用していることもuniversal（サーバー側のレンダリング）などせずにSEOのために何を意味し、その実現を前提としています。

あなたはTitleとMetaなど

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

constructor(
    private _meta: Meta, 
    private _title: Title 

... 

this._title.setTitle('foo'); 

... 

let meta: MetaDefinition[] = [ 
    { name: 'application-name', content: 'foo' }, 
    { name: 'description', content: 'bar' } 
]; 

this._meta.addTags(meta); 

更新持つプラットフォームブラウザでメタを扱うことができます。そうです、あなたの場合には、あなたが応答に基づいて追加することができます を。清潔について

.subscribe((post) => { 
    this.post = post; 
    this._title.setTitle(this.post.title); 
}); 

Iはroute.dataまたはHTTP応答を処理するために使用することができる「setPageMeta（）」のような別個「service.method」を作成します。