Angular 2+ ASP.NET Coreプロジェクトにサードパーティのスクリプトウィジェットを挿入する方法

Question

Tradingviewからウィジェットを私のAngular 2+ ASP.NET Coreウェブサイトに挿入したいと思います。

<!-- 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 --> 

私は2つの方法を試しました。オプション1はDomSanitizerを使用します。上記のスクリプトを私のコンポーネントの文字列変数として初期化します。その後、私のテンプレートで私が割り当てる：私が呼ぶのOnInit

In component: 
myScriptInComponent = the script above; 

In my template 

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

た後：

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

この場合、エラーが発生します。 安全なHTMLが必要です。スクリプトがあります

次に、webpack --config webpack.config.vendor.jsを使用してhttps://s3.tradingview.com/tv.jsからwebpackを使用してアプリケーションにjsファイルを挿入しようとしました。

その後、私はこのjsファイルをコンポーネントにインポートし、新しいTradingView.widgetなどを呼び出しました。 onInitしかし、ここで私は未定義のプロパティ 'ウィジェット'を読み取ることができないというエラーが表示されます。

次は何を試してくれるのか。どんなヒントもありがとう。ありがとうございました。

Answer 1

私が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>'); 
{ 

幸運！