Question

我有一个angular4博客应用程序需要SEO的动态元数据。我的服务（BlogService）从PHP服务器提供JSON数据。 e.g。

{"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}

然后以通常的Angular方式对其进行解释和显示（例如 {{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

这假设我们意识到这对于没有universal（服务器端渲染）等的SEO没有任何意义。而且我们正在使用v4 +。

您可以使用具有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 ); 
 });

为了清洁，我会创建一个单独的服务方法＆＃39;喜欢＆＃39; setPageMeta（）＆＃39;，可以用来处理route.data或http响应。

如何在Angular4中添加动态元数据

1 个答案: