错误参考错误：未定义交易视图答案

【问题标题】：ERROR ReferenceError: TradingView is not defined错误参考错误：未定义交易视图
【发布时间】：2020-11-24 19:20:33
【问题描述】：

我正在尝试使用以下代码在我的 Angular 应用上显示 TradingView 的小部件：

technical.component.html：

  <div class="tradingview-widget-container" style="width: 2000; height: 2000; margin-bottom: 100px;">
    <div id="tradingview_bac65"></div>
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    
    <script type="text/javascript">

    </script>
  </div>

technical.component.ts：

import { Component, OnInit, AfterViewInit } from '@angular/core';

declare const TradingView: any;

@Component({
  selector: 'app-technical',
  templateUrl: './technical.component.html',
  styleUrls: ['./technical.component.scss']
})
export class TechnicalComponent implements OnInit, AfterViewInit {

  constructor() { }
  ngOnInit() {

  }

  ngAfterViewInit(){
    new TradingView.widget(
      {
      "width": 980,
      "height": 610,
      "symbol": "BTCUSD",
      "timezone": "Etc/UTC",
      "theme": "Light",
      "style": "1",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "enable_publishing": false,
      "withdateranges": true,
      "range": "ytd",
      "hide_side_toolbar": false,
      "allow_symbol_change": true,
      "show_popup_button": true,
      "popup_width": "1000",
      "popup_height": "650",
      "no_referral_id": true,
      "container_id": "tradingview_bac65"
    }
      );

}


}

technical.component.scss：

.example-form {
    min-width: 150px;
    max-width: 500px;
    width: 70%;
  }
  
  .example-full-width {
    width: 70%;
  }

  .center {
    display: flex;
    justify-content: center;
  }

  .margins {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

但它没有在浏览器中显示小部件，我在控制台中看到以下错误：

ERROR ReferenceError: TradingView is not defined

我必须提到，这段代码在我以前的应用程序上运行，只是将它复制到我的新应用程序中是行不通的！

【问题讨论】：

标签： angular widget referenceerror tradingview-api

【解决方案1】：

尝试在Renderer2 和ViewChild 的帮助下动态加载它

原始 TradingView 小部件代码

<!-- TradingView Widget BEGIN -->
        <div class="tradingview-widget-container">
          <div class="tradingview-widget-container__widget"></div>
          <div class="tradingview-widget-copyright"><a rel="noreferrer" href="https://www.tradingview.com/symbols/MHCUSD/?exchange=CEXIO" rel="noopener" target="_blank"><span class="blue-text">MHCUSD Rates</span></a> by TradingView</div>
          <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js" async>
          {
          "symbol": "CEXIO:MHCUSD",
          "width": 350,
          "colorTheme": "light",
          "isTransparent": true,
          "locale": "en"
        }
          </script>
        </div>
<!-- TradingView Widget END-->

Angular HTML 模板

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a rel="noreferrer"
      href="https://www.tradingview.com/symbols/MHCUSD/?exchange=CEXIO" rel="noopener" target="_blank">
      <span class="blue-text">MHCUSD Rates</span></a> by TradingView</div>
  <div #tradingview></div>
</div>
<!-- TradingView Widget END -->

角度组件

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

@Component({
  selector: 'app-splash-right',
  templateUrl: './splash-right.component.html',
  styleUrls: ['./splash-right.component.less']
})
export class SplashRightComponent implements AfterViewInit {
  @ViewChild('tradingview') tradingview?: ElementRef;

  constructor(private _renderer2: Renderer2) { }

  ngAfterViewInit(): void {
    let script = this._renderer2.createElement('script');
    script.type = `text/javascript`;
    script.src = "https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js";
    script.text = `
    {
      "symbol": "CEXIO:MHCUSD",
      "width": 350,
      "colorTheme": "light",
      "isTransparent": true,
      "locale": "en"
    }`;
  
    this.tradingview?.nativeElement.appendChild(script);
  }
}

【讨论】：

【解决方案2】：

作为快速解决方案，试试这个：

 setTimeout(function() {
    // TradingView code
 }, 1000)

【讨论】：