Embed Tradingview into Angular 5

问题

I just copy the function in the embed script found here (https://www.tradingview.com/widget/advanced-chart/) into a component in my Angular 5 app, and include the source script in angular-cli.json. However, the component returns error "Cannot find name 'TradingView'". Someone has any suggestions?

回答1:

I found a way to solve the compile error by declaring TradingView in component:

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

View:

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

回答2:

I added widget loading scripts to index.html, after
in component's template-file (html) I leaved only html tags
in component's ts-file:

declare const TradingView: any;

and in ngAfterViewInit() I putted new TradingView.widget(...) inside setTimeout

And that's it! It works.

回答3:

Works fine with my implementation https://stackblitz.com/edit/stack-48296351

回答4:

just add

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

in index.html and it will be work perfectly.

来源：https://stackoverflow.com/questions/48296351/embed-tradingview-into-angular-5

标签

angular

tradingview-api