Я пытаюсь использовать данные, полученные из веб-службы, для обновления метаданных в универсальном приложении Angular 6 (обновление: теперь Angular 7) (с использованием Meta и Title). Я специально делаю это для карт Twitter и Facebook. Я знаю, что их сканеры не выполняют JavaScript, поэтому я использую Angular Universal для установки метаданных на стороне сервера. Я использую инструмент отладчика Facebook Sharing для проверки результатов.
Я пробовал несколько разных подходов и искал примеры, но не нашел ни одного, в котором данные извлекались бы из асинхронного вызова веб-службы до установки метаданных. (Обратите внимание, что я успешно использовал эту службу с веб-службой в приложении Angular Universal 4.)
Используя приведенный ниже код, тег «og:url» установлен правильно, поскольку для получения данных не требуется вызов веб-службы. Тем не менее, заголовок не установлен должным образом. Если я передам вызов setTitle в ngOnInit и предоставлю строку, это сработает, но получение данных из веб-службы не сработает.
Я пытался использовать службу для сбора данных, а затем установить метаданные, но это тоже не работает. Я получаю данные от преобразователя, но это не решает проблему 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 });
getInfo
серверную часть? - person David   schedule 06.10.2018render
приложения SSR. Трудно контролировать асинхронные вызовы во время рендеринга, поэтому мы обнаружили, что хорошей практикой является предварительное разрешение всех данных и передача ихrender
для как можно меньшего количества дополнительных заданий. Я могу показать вам пример, если все еще интересно. - person muradm   schedule 29.10.2018