将 Tradingview 嵌入 Angular 5

Question

我只是将此处找到的嵌入脚本 (https://www.tradingview.com/widget/advanced-chart/) 中的函数复制到我的 Angular 5 应用程序中的一个组件中，并将源脚本包含在 angular-cli.json。但是，组件 returns 错误 "Cannot find name 'TradingView'"。有人有什么建议吗？

Answer 1

适用于我的实施 https://stackblitz.com/edit/stack-48296351

Answer 2

我通过在组件中声明 TradingView 找到了解决编译错误的方法：

declare const TradingView: any;

export class ChartComponent implements AfterViewInit {
ngAfterViewInit() {
   new TradingView.widget({
      'container_id': 'technical-analysis',
      'autosize': true,
      'symbol': this.symbolPair,
      'interval': '120',
      'timezone': 'exchange',
      'theme': 'Dark',
      'style': '1',
      'toolbar_bg': '#f1f3f6',
      'withdateranges': true,
      'hide_side_toolbar': false,
      'allow_symbol_change': true,
      'save_image': false,
      'hideideas': true,
      'studies': [ 
      'MASimple@tv-basicstudies' ],
      'show_popup_button': true,
      'popup_width': '1000',
      'popup_height': '650'
    });
  }
}

查看：

<div id="technical-analysis"></div>

Answer 3

我在
在组件的 template-file (html) 我只留下 html 标签
在组件的ts-file:

declare const TradingView: any;

在ngAfterViewInit()中我把new TradingView.widget(...)放在setTimeout

就是这样！有效。

Answer 4

只需添加

<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>

在index.html 它将完美运行。

Answer 5

我知道这有点旧，但我现在只是在试用 TradingView 的小部件。这很有帮助。原来 TradingView 正在改变他们的小部件脚本的加载方式，我想我可能会分享我想出如何为他们的新旧加载方法制作可重用组件的方式。享受：

这是注入的版本（较新）：

 import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';

 @Component( {
   selector: 'rip-trading-view-fundamentals',
   template: `
       <div class="tradingview-widget-container" style="height: 300px;" #containerDiv>
           <div class="tradingview-widget-container__widget"></div>

       </div>
   `,
 } )

 export class TradingViewFundamentalsComponent implements AfterViewInit {

   // allows for loading with any symbol
   @Input() symbol: string = '';
   settings: any = {};
   // id for being able to check for errors using postMessage
   widgetId: string = '';

   // wanted to be able to hide the widget if the symbol passed in was invalid (don't love their sad cloud face)
   @ViewChild( 'containerDiv', { static: false } ) containerDiv: ElementRef;

   constructor( private _elRef: ElementRef ) {
   }

   ngAfterViewInit() {
     // need to do this in AfterViewInit because of the Input
     setTimeout( () => {
       this.widgetId = `${ this.symbol }_fundamnetals`;

       // postMessage listener for handling errors
       if ( window.addEventListener ) {
         window.addEventListener( 'message', ( e: any ) => {
             if ( e && e.data ) {
               console.log( e );
               const payload = e.data;
               // if the frameElementId is from this component, the symbol was no good and we should hide the widget
               if ( payload.name === 'tv-widget-no-data' && payload.frameElementId === this.widgetId ) {
                 this.containerDiv.nativeElement.style.display = 'none';
               }
             }
           },
           false,
         );
       }


       this.settings = {
         symbol: this.symbol,
         colorTheme: 'light',
         isTransparent: false,
         largeChartUrl: '',
         displayMode: 'regular',
         height: 300,
         autosize: true,
         locale: 'en',
       };
       const script = document.createElement( 'script' );
       script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-financials.js';
       script.async = true;
       script.id = this.widgetId;
       script.innerHTML = JSON.stringify( this.settings );
       this.containerDiv.nativeElement.appendChild( script );
       const brandingDiv = document.createElement( 'div' );
       brandingDiv.innerHTML = `
     <div class="tradingview-widget-copyright">
     <a href="https://www.tradingview.com/symbols/${ this.symbol }/" rel="noopener" target="_blank">
     <span class="blue-text">${ this.symbol } Fundamental Data</span></a>
               by TradingView
           </div>
 `;

     } );
   }

 }

这里是旧版本，通过全局 TradingView 对象将其库加载到您的 index.html:

import { AfterViewInit, Component, ElementRef, HostListener, Input, ViewChild } from '@angular/core';
import { Logger } from '../../helpers/logger.service';

// declaration so Typescript knows about the TradingView object loaded in from index.html
declare const TradingView: any;

@Component( {
  selector: 'rip-trading-view-symbol-overview',
  template: `
      <div #containerDiv id="overview_{{symbol}}" class="tradingview-widget-container" style="height: 300px;"></div>
  `,
} )

export class TradingViewSymbolOverviewComponent implements AfterViewInit {

  chart: any;
  // allows for loading with any symbol and description
  @Input() symbol: string = '';
  @Input() description: string = '';
  // id for being able to check for errors using postMessage
  widgetId: string = '';

  // wanted to be able to hide the widget if the symbol passed in was invalid (don't love their sad cloud face)
  @ViewChild( 'containerDiv', { static: false } ) containerDiv: ElementRef;

  ngAfterViewInit() {
    // need to do this in AfterViewInit because of the Input
    setTimeout( () => {
      this.widgetId = `overview_${ this.symbol }`;

      // postMessage listener for handling errors
      if ( window.addEventListener ) {
        window.addEventListener( 'message', ( e: any ) => {
            if ( e && e.data ) {
              console.log( e );
              const payload = e.data;
              if (
                // if the frameElementId is from this component, the symbol was no good and we should hide the widget
                payload.name === 'tv-widget-no-data' && payload.frameElementId === this.widgetId ) {
                // console.log( 'No data available for the symbol profile widget' );
                this.containerDiv.nativeElement.style.display = 'none';
              }
            }
          },
          false,
        );
      }


      this.chart = new TradingView.MediumWidget( {
        container_id: this.widgetId,
        symbols: [
          [
            this.description,
            this.symbol,
          ],
          // could load more symbols, but we just needed the one at a time for now
          // [
          //   'Google',
          //   'GOOGL',
          // ],
          // [
          //   'Microsoft',
          //   'MSFT',
          // ],
        ],
        id: this.widgetId,
        chartOnly: false,
        // 'width': 1000,
        height: 300,
        autosize: true,
        locale: 'en',
        colorTheme: 'light',
        gridLineColor: '#F0F3FA',
        trendLineColor: '#1b66ae',
        fontColor: '#787B86',
        underLineColor: 'rgba(145,196,242,0.35)',
        isTransparent: false,
      } );
    } );
  }

}

如果有人注意到如何进一步改进这一点，我会洗耳恭听，我希望这些解决方案能帮助任何人寻找答案，因为那里没有太多答案，而 TradingView 似乎回复电子邮件的速度非常快，他们没有任何我可以在他们的网站上找到的文档来寻求这样的帮助。

Answer 6

伙计们！其他解决方案如果这些图表对您来说是必需的（就像我的情况一样），您可以使用例如 Flask 为您的应用程序创建一个简单的后端：

创建 index.html (app/templates/index.html)，在 init.py (app/初始化.py):

from flask import Flask, request, render_template
from flask_restful import Resource, Api
from flask_cors import CORS, cross_origin

app = Flask(__name__)
app.config['DEBUG'] = True
CORS(app)

@app.route('/tradingView')
def getChart():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(port=6200)

然后启动运行服务器

在您的组件中添加：

<iframe src="http://127.0.0.1:6200/tradingView" frameborder="0"></iframe>

此解决方案需要 python 和烧瓶知识，但它尽可能简单，祝你好运！

将 Tradingview 嵌入 Angular 5

Embed Tradingview into Angular 5

angular

tradingview-api