Angular 6 Meta service с динамическими метаданными из веб-сервиса - PullRequest
Новая
       26

Angular 6 Meta service с динамическими метаданными из веб-сервиса

0 голосов
/ 30 сентября 2018

Я пытаюсь использовать данные, извлеченные из веб-службы, для обновления метаданных в Angular 6 (обновление: теперь Angular 7) универсального приложения (с использованием мета и заголовка).Я специально делаю это для Твиттера и Фейсбука.Я знаю, что их сканеры не выполняют 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 });

1 Ответ

0 голосов
/ 30 октября 2018

Я нашел решение.Решив, что это не должно быть проблемой кода, я пошел в Angular Universal репозиторий для начинающих и обновил мой конфиг (например, tsconfig.json, angular.json и т. Д.), Пока он не заработал.Мой проект несколько раз обновлялся, и я не скопировал все изменения из репозитория.

...