Question

我的一个组件模板需要有https://www.tradingview.com/widget/的小部件，它们提供了我们可以嵌入的脚本标记。但是，由于angular 2从组件模板中删除了脚本标记，因此最好嵌入这些小部件。

Answer 1

我相信你会做这样的事情并在组件的ngOnInit()函数中初始化图表

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"
      });
  }

}

my-widget.component.html ，放入包含div

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

然后在 index.html 中，导入所需的.js文件

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

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

1 个答案: