不渲染instagram，twitter和其他嵌入角

Question

我正在尝试显示来自instagram，twitter和其他允许嵌入网站的库中的内容。 我遇到的问题是，它仅在第一次呈现嵌入的内容，然后当我返回相同的内容时，不会再次呈现嵌入。 :(

这是发生在我身上的一个示例： https : //stackblitz.com/edit/angular-vcv94j （我在index.html中添加了库js）

我位于test-1中，嵌入内容将呈现，而当我进行test-2时，嵌入内容将不呈现

该问题可以采取什么解决方案...？ ：S

有什么办法可以再次触发javascript库的事件吗？

Answer 1

如果您正在动态加载内容（例如AJAX），则这些嵌入服务通常具有JavaScript API方法，在将内容插入页面后，您需要调用该方法以呈现帖子。

例如，Instagram具有window.instgrm.Embeds.process（） ，Facebook具有FB.XFBML.parse（）; 。

您会在Twitter和其他社交媒体嵌入中找到类似的内容。

Answer 2

您将包括Instagram的embed.js ，后者可在DOM中搜索某些元素并将其替换为嵌入帖子的iframe元素。

该脚本提供了一个称为instgrm的全局变量，该变量允许访问

instgrm.Embeds.process()

重复该搜索。 您可以在每次渲染组件时调用它。

我用两种不同的方法对您的示例进行了分叉并进行了相应的修改：

1. 从组件调用服务
2. 对具有data-instgrm-permalink属性的元素使用指令

Answer 3

将<script async src="//www.instagram.com/embed.js"></script>替换为<script async src="https://www.instagram.com/embed.js"></script>并将此行代码移至index.html头部