在Angular 2組件模板中嵌入小部件

Question

我的組件模板之一需要有一個來自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" 
     }); 
    } 

} 

我-widget.component.html，放在含有div的ngOnInit()功能

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

然後在您的index.html中，導入需要的.js文件

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