我如何插入第三方脚本工具到角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核心项目

回答

相关问题