具有来自web服务的动态元数据的角6元服务

Question

我试图使用从web服务中检索到的数据来更新角6(更新:现在是角7)通用应用程序(使用Meta和Title)中的元数据。我专门为推特和Facebook卡做这件事。我知道他们的爬虫不执行JavaScript，这就是为什么我使用来设置服务器端的元数据。我正在使用Facebook共享调试器工具来检查结果。

我尝试了几种不同的方法，并寻找了一些例子，但我还没有找到在设置元数据之前从异步调用web服务中检索数据的方法。(请注意，我成功地将此服务与web服务结合在了一个4应用程序中。)

使用下面的代码，可以正确地设置"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 });
  });

}

更新:我还尝试使用Resolver首先获取数据，以便只在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

我找到了解决办法。在决定这不是代码问题后，我去了转角万向起动器回购并更新了我的配置(例如，tsconfig.json、angular.json等等)。直到成功为止。我的项目已经升级了几次，我没有复制所有的修改从启动回购。