使用角度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以運行腳本

回答

相關問題