10

我正在尝试使用从 Web 服务检索到的数据来更新 Angular 6（更新：现在是 Angular 7）通用应用程序（使用 Meta 和 Title）中的元数据。我专门为 Twitter 和 Facebook 卡片执行此操作。我知道他们的爬虫不执行 JavaScript，这就是我使用 Angular Universal 在服务器端设置元数据的原因。我正在使用Facebook 共享调试器工具来检查结果。

我尝试了几种不同的方法，并寻找了示例，但我还没有找到在设置元数据之前从对 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 });
4

1 回答 1

4

我找到了解决方案。在确定这一定不是代码问题后，我访问了Angular Universal 初始存储库并更新了我的配置（例如，tsconfig.json、angular.json 等），直到它起作用。我的项目已经升级了几次，并且我没有复制初始存储库中的所有更改。

于 2018-10-30T09:17:08.337 回答