用于社交共享的动态元标记 Angular 6+ 通用

问：

我想这个问题被问了太多次了，因为我几乎已经经历了所有可能的问题。

我的需求简化：我想为我的网站创建社交分享按钮，该网站使用 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

类似的未解决的问题：

• Angular 通用服务器端渲染，元标记

• 具有动态内容的 Angular 通用更新元标记

• 使用 angular universal 更新 SEO 的元标记

• 使用 facebook share 动态更新元标记 - angular 6

有人可以为此问题提供完整的分步解决方案，并解释为什么当前使用 Meta 的方式不起作用。