将Tradingview嵌入Angular 5

Question

我只是将函数复制到此处（https://www.tradingview.com/widget/advanced-chart/）的嵌入脚本中，并将其复制到Angular 5应用程序的组件中，并将源脚本包含在angular-cli.json中。但是，该组件返回错误“找不到名称'TradingView'”。有人有什么建议吗？

Answer 1

我找到了一种通过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 2

我知道这有点旧，但我现在只是尝试 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 似乎回复电子邮件很快，但他们没有我可以在他们的网站上找到类似这样的帮助的任何文档。