角2のコンポーネントテンプレートにウィジェットを埋め込む

Question

私のコンポーネントテンプレートの1つにhttps://www.tradingview.com/widget/のウィジェットが必要です。埋め込むことができるスクリプトタグを提供しています。しかし、角2はコンポーネントテンプレートからスクリプトタグを削除するので、これらの種類のウィジェットを埋め込むにはどうすべきでしょうか。

Answer 1

私はあなたがこのような何かをして、コンポーネント

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-my-widget', 
    templateUrl: './app/my-widget/my-widget.component.html', 
    styleUrls: ['./app/my-widget/my-widget.component.css'] 
}) 
export class MyWidgetComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 

     new TradingView.widget({ 
      "container_id": "myWidgetContainer", 
      "width": 980, 
      "height": 610, 
      "symbol": "NASDAQ:AAPL", 
      "interval": "D", 
      "timezone": "Etc/UTC", 
      "theme": "White", 
      "style": "1", 
      "locale": "en", 
      "toolbar_bg": "#f1f3f6", 
      "enable_publishing": false, 
      "allow_symbol_change": true, 
      "hideideas": true, 
      "show_popup_button": true, 
      "popup_width": "1000", 
      "popup_height": "650" 
     }); 
    } 

} 

含むdivの

<div id="myWidgetContainer"> 
</div> 

に入れ、私-widget.component.htmlの ngOnInit()機能でグラフを初期化すると考えています

index.htmlに、必要な.jsファイルをインポートします。

<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>