在Angular 2组件模板中嵌入小部件 [英] Embed widgets in Angular 2 component template

问题描述

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

One of my component template need to have a widget from https://www.tradingview.com/widget/ and they provide a script tag that we can embed. But since angular 2 remove script tag from component template, what should be the best to embed these kind of widgets.

推荐答案

我相信您会做类似的事情，并在组件的ngOnInit()函数中初始化图表

I believe you would do something like this and initialize the chart in the ngOnInit() function of the component

    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

my-widget.component.html, put in the containing div

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

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

Then in your index.html, import the .js filed needed

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

这篇关于在Angular 2组件模板中嵌入小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！