Angular 6 具有来自 Web 服务的动态元数据的元服务

Question

我正在尝试使用从 Web 服务检索的数据来更新 Angular 6（更新：现在 Angular 7）通用应用程序（使用元数据和标题）中的元数据。我专门为 Twitter 和 Facebook 卡片做这件事。我知道他们的爬虫不执行 JavaScript 这就是我使用 Angular Universal 在服务器端设置元数据的原因。我正在使用 Facebook Sharing debugger tool 检查结果。

我尝试了几种不同的方法，并寻找了示例，但我还没有找到在设置元数据之前从对 Web 服务的异步调用检索数据的方法。（请注意，我在 Angular Universal 4 应用程序中通过 Web 服务成功使用了此服务。）

使用下面的代码，正确设置了 "og:url" 标记，因为它不需要网络服务调用来获取数据。但是，标题未正确设置。如果我将 "setTitle" 调用移动到 ngOnInit 并提供一个字符串，那是可行的——但是从 Web 服务获取数据却不行。

我试过使用服务来收集数据然后设置元数据，但这也不起作用。我从解析器获取数据，但它没有解决 Facebook/Twitter 问题。

ngOnInit() {
    const metaUrl = 'https://www.test.com' + this._router.url;
    this._metaService.updateTag({ property: 'og:url', content: metaUrl });

    this._sub = this._route.params.subscribe(params => {
      const code = params['person'];
      this.getInfo(code);
    });
}

getInfo(code: string) {
  this._myWebService.getPerson(code).subscribe(
      data => {
        this._person = data;
        // set dynamic metadata
        const metaTitle = this._person.name + ' | site description';
        this._titleService.setTitle(metaTitle);
        this._metaService.updateTag({ name: 'twitter:title', content: metaTitle });
  });

}

更新：我还尝试使用解析器先获取数据，这样我就可以在 onInit 中使用它。没用。

 { path: 'view/:person', component: ViewComponent,
    resolve: { person: ViewResolver }, data: { person: ViewResolver }
  }

然后在onInit中：

const data: any = this._routeActive.snapshot.data;
this.metaTitle = data.person.value.name;
this._metaService.updateTag({property: 'og:title', content: this.metaTitle });
this._metaService.updateTag({name: 'twitter:title', content: this.metaTitle });

Answer 1

我找到了解决办法。在确定这一定不是代码问题后，我转到 Angular Universal starter repo 并更新了我的配置（例如 tsconfig.json、angular.json 等）直到它起作用。我的项目已经升级了几次，但我还没有从 starter repo 复制所有更改。

Angular 6 具有来自 Web 服务的动态元数据的元服务

Angular 6 Meta service with dynamic metadata from web service

metadata

typescript

angular-universal

angular

angular7