使用角度2+操作带有JS的DOM以运行脚本

我需要将脚本插入到一个类似于此项的角度项目中。使用角度2+操作带有JS的DOM以运行脚本

<script type="text/javascript" src="https://s3.tradingview.com/external- 
embedding/embed-widget-events.js"> 
{ 
"width": "510", 
"height": "600", 
"importanceFilter": "-1,0,1" 
} 
</script>

显然，不能将它粘贴到模板中，因为NG会清理脚本标记，什么都不会发生。所以我有一个操纵DOM的方法，看起来像这样。

insertScript() { 

    var element = document.getElementById("myCal"); 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = "https://s3.tradingview.com/external-embedding/embed-widget-events.js"; 
    script.innerHTML = '{"width": "510","height": "600","importanceFilter": "-1,0,1"}'; 
    element.appendChild(script); 
    console.log(element); 
}

现在，我的角度与消毒这样做，我们没有得到成过程后运行ngAfterViewInit（）方法。脚本被插入，控制台输出显示它在div处，你可以检查看到它，但没有任何反应！

我在项目外的普通html上下文中检查了脚本，它完美地工作。

不知道从这里搬到哪里真的，任何建议将非常感激。谢谢。

来源

2017-09-28 Yuri Zolotarev

看来，该脚本可能会绑定到事件发生在脚本实际上在Angular中初始化之前，例如onload。 –

经过多次尝试插入小部件后，答案相当令人惊讶。当我们理解这个电话的年表时，它看起来像这样。

1）外部JS来源 2）然后，因为我们的圆顶操作的脚本实际上所谓正确但没有插入，因为JS源发向其中消毒其它来源的电话。

我们通过访问交易视图页面来检查插入的iframe，这是我们从小部件的加载位置看到实际真实源码的地方。在我们绕过该源代码的安全装载之后。

this.calendarSrc = 
     this.sanitizer 
     .bypassSecurityTrustResourceUrl('the real source');

这是非常棘手的问题，我们尝试了每一个可能的圆顶操作，可以解决它，但答案是在表面上。

在角度的html模板中，我们只需简单地粘贴一个iframe，iframe源代码就可以从交易视图网站的iframe中获得真正的源代码。在iframe中，我们用一个变量替换源代码，然后通过变量的安全性替换。

来源

2017-09-29 16:26:39

使用角度2+操作带有JS的DOM以运行脚本

回答

相关问题