Динамические метатеги для социального обмена Angular 6+ Universal - PullRequest
Новая
       36

Динамические метатеги для социального обмена Angular 6+ Universal

1 голос
/ 05 июня 2019

Полагаю, этот вопрос задавался слишком много раз, потому что я рассмотрел почти все возможные вопросы, связанные с этим.

Моя потребность упрощена: Я хотел бы создать кнопки социальных сетей для своего сайта, которые используют Angular 7 и имеют универсальную правильную настройку.

Подробности: Я ищу решение, которое позволило бы мне динамически обновлять метатеги для Facebook, Twitter и других социальных сетей таким образом, чтобы при нажатии кнопки «Поделиться» я мог обмениваться контентом, который является специфическим для текущей статьи в представлении. Важное замечание: Данные для этих мета-тегов получают путем вызова API, поэтому решение не может включать жестко закодированные данные.

Пробное решение: Я пробовал решение использовать Meta из «@ angular / platform-browser», но в результате он обновляет теги после того, как DOM уже отрендерен.

ngOnInit моего компонента имеет следующее: 

this.musicService.getTrackInfo(track._id)
                .subscribe(track => {  
            this.metaService.setTag('og:title', track.name);
            this.metaService.setTag('og:type', 'music.song'); });

Исследования сделаны:

Похожие нерешенные проблемы:

Может ли кто-нибудь предоставить полное пошаговое решение этой проблемы, а также объяснения, почему не работает текущий способ использования Meta.

1 Ответ

0 голосов
/ 19 июня 2019

У меня работает updateTag В index.html я добавил все теги без значения, т.е. 

<meta name="description" content="">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">

Также я добавляю динамические значения так: 

this.meta.updateTag({
        name: 'twitter:description', content: *value from api*
      });
...