错误ReferenceError:未定义TradingView

Question

我正在尝试使用以下代码在我的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

我必须提到，这段代码在我以前的应用程序上是有效的，只是把它复制到我的新应用程序中，bud不起作用！

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

Answer 2

作为快速解决方案，请尝试以下方法：

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