Question

基本上，在我的应用程序中，我现在尝试使用embedSocial widget，我知道您不能将脚本标签放在有角度的html模板中，因此我编写了一个函数，该函数将在视图加载后像这样添加脚本

component.html

<div id="#embedSocial"></div>

component.ts

embedSocial() {
    const embed = <HTMLElement>document.querySelector('#embedSocial');
    const fragment = document
       .createRange()
       .createContextualFragment(
            `<div class='embedsocial-reviews' data-ref="c310fe0818382e73da13536ec2d6823r43243sd"></div><script>(function(d, s, id){var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/embedscript/ri.js"; d.getElementsByTagName("head")[0].appendChild(js);}(document, "script", "EmbedSocialReviewsScript"));</script>`
       );
    embed.appendChild(fragment);
}

ngAfterViewInit() {
    this.embedSocial();
}

现在，此功能适用于初始页面加载，但是当我离开页面导航然后返回时，该窗口小部件不再加载。

现在我已经在方法上放置了断点，并且肯定会调用它们，然后当我检查元素时，我可以看到正在插入脚本标签，但是小部件不再显示，并且当我检查网络选项卡时未进行embedWidget调用。

有人知道如何解决此问题吗？这是在角度组件中添加脚本标签的最佳方法吗？还有另一种/更好的方法吗？

任何帮助将不胜感激！

编辑

现在已经过期了，好像因为该片段已经在返回页面上添加了，所以它不会尝试从api获取小部件。

现在我已经尝试执行此操作以删除子节点，然后像这样重新添加它

embed.removeChild(fragment);
embed.appendChild(fragment);

但是现在该小部件根本不显示！

谢谢

导航离开并再次返回Angular 6时，脚本标签不起作用

0 个答案: