Question

我正在尝试使用从Web服务获取的数据来更新Angular 6（更新：现在为Angular 7）通用应用程序中的元数据（使用元和标题）。我专门针对Twitter和Facebook卡执行此操作。我知道他们的搜寻器不执行JavaScript，这就是为什么我使用Angular Universal在服务器端设置元数据的原因。我正在使用Facebook Sharing debugger tool检查结果。

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

使用下面的代码，正确设置“ og：url”标签，因为不需要Web服务调用即可获取数据。但是，标题设置不正确。如果我将“ 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等），直到它生效为止。我的项目已经升级了几次，而且我没有复制初学者存储库中的所有更改。

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

1 个答案: