我如何插入第三方腳本工具到角2+ ASP.NET核心項目

要插入從Tradingview一個widget到我的角度2+ ASP.NET核心網站。我如何插入第三方腳本工具到角2+ ASP.NET核心項目

<!-- TradingView Widget BEGIN --> 
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"> 
</script> 
<script type="text/javascript"> 
new TradingView.widget({ 
    "width": 980, 
    "height": 610, 
    "symbol": "NASDAQ:AAPL", 
    "interval": "D", 
    "timezone": "Etc/UTC", 
    "theme": "Light", 
    "style": "1", 
    "locale": "en", 
    "toolbar_bg": "#f1f3f6", 
    "enable_publishing": false, 
    "allow_symbol_change": true, 
    "hideideas": true 
}); 
</script> 
<!-- TradingView Widget END -->

所以，我嘗試了兩種方法。選項1使用DomSanitizer。我將上面的腳本初始化爲組件中的字符串變量。然後在我的模板，我給你：

In component: 
myScriptInComponent = the script above; 

In my template 

<div [innerHtml]="script"> 
</div>

這之後是OnInit我打電話：

this.script = this.sanitizer.bypassSecurityTrustScript（this.mySriptInComponent）;

在這種情況下，我收到一個錯誤。需要一個安全的HTML，有一個腳本

然後我試圖使用的WebPack --config webpack.config.vendor.js插入來自https://s3.tradingview.com/tv.js js文件到我的應用程序使用的WebPack。

之後，我只是進口了JS文件到我的組件，並呼籲新TradingView.widget ...等。 onInit但在這裏我得到一個錯誤，說不能讀取未定義的屬性'小部件'。

那種堅持下一步嘗試的東西。真的很感激任何提示。謝謝。

來源

2017-09-27 Yuri Zolotarev

所以之後我已閱讀並試圖絕望一切有關於DOM操作只工作實際上是postscribe，我忽略了最初的東西。

首先使用npm install安裝--save postscribe，然後添加到webpack.config.vendor.js並運行webpack --configure webpack.config.vendor.js，然後在模板中創建一個帶有ID的div。在您的組件中執行以下操作：

import * as postscribe from 'postscribe'; 

ngAfterViewInit() { 
    postscribe('#yourDivId', '<script>yourscriptstring</script>'); 
{

祝您好運！

來源

2017-09-27 13:21:20

我如何插入第三方腳本工具到角2+ ASP.NET核心項目

回答

相關問題