Question

我猜这个问题被问了太多次了，因为我已经处理了几乎所有与此问题有关的问题。

简化我的需求：我想为使用Angular 7并已正确设置通用设置的网站创建社交共享按钮。

详细信息：我正在寻找一种解决方案，该解决方案允许我动态更新Facebook，Twitter和其他社交媒体平台的元标记，以便在单击共享按钮时可以共享内容特定于当前文章。重要：这些元标记的数据是通过调用API获得的，因此解决方案不能包含硬编码的数据。

尝试过的解决方案：我尝试了使用来自'@ angular / platform-browser'的Meta的解决方案，但结果是它在呈现DOM之后更新了标签。

我组件的ngOnInit具有以下内容：

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

已进行研究：

https://samvloeberghs.be/posts/better-sharing-on-social-media-platforms-with-angular-universal

未解决的类似问题：

有人可以为此问题提供完整的分步解决方案，并解释当前使用Meta的方法为何无效的原因。

Answer 1

使用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*
      });

社交共享Angular 6+ Universal的动态元标记

1 个答案: