在 Angular 9 应用程序中嵌入 TikTok 视频答案

【问题标题】：Embed TikTok video in angular 9 Application在 Angular 9 应用程序中嵌入 TikTok 视频
【发布时间】：2021-06-14 23:20:36
【问题描述】：

在 tiktok 开发者页面上，我发现可以在网页中嵌入 tiktok 视频。方法看起来很简单，复制嵌入的代码，粘贴到你的html代码中。

嗯，我复制的代码就是这个

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@alebuffoli/video/6793667068622359814" data-video-id="6793667068622359814" style="max-width: 605px;min-width: 325px;" > 
<section> 
<a target="_blank" title="@alebuffoli" href="https://www.tiktok.com/@alebuffoli">@alebuffoli</a> <p>Non male ah? ????</p> 
<a target="_blank" title="♬ suono originale - Alessandro Buffoli" href="https://www.tiktok.com/music/suono-originale-6793595951710833413">♬ suono originale - Alessandro Buffoli</a> 
</section> 
</blockquote> 
<script async src="https://www.tiktok.com/embed.js"></script>

但问题是它在标准的 html 页面中有效，但在我的 Angular 应用程序中，我看到的唯一内容是：

但结果应该是这样的：https://developers.tiktok.com/doc/Embed

我什至尝试过使用innerHTML 块，但结果是一样的。这里有什么问题？

【问题讨论】：

标签： javascript angular

【解决方案1】：

你可以将抖音的embed.js脚本直接放到index.html文件中

<head>
...
  <script async src="https://www.tiktok.com/embed.js"></script>
</head>

然后是相应组件的*.component.html文件中的HTML sn-p

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@alebuffoli/video/6793667068622359814" data-video-id="6793667068622359814" style="max-width: 605px;min-width: 325px;" > 
<section> 
<a target="_blank" title="@alebuffoli" href="https://www.tiktok.com/@alebuffoli">@alebuffoli</a> <p>Non male ah? ?</p> 
<a target="_blank" title="♬ suono originale - Alessandro Buffoli" href="https://www.tiktok.com/music/suono-originale-6793595951710833413">♬ suono originale - Alessandro Buffoli</a> 
</section> 
</blockquote>

【讨论】：