Angular 错误引用错误：未定义TradingView

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

作为快速解决方案，请尝试下一个解决方案

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

---

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

原始TradingView小部件代码

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

<!-- 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-->

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