错误参考错误:未定义 TradingView [英] ERROR ReferenceError: TradingView is not defined

查看：72
本文介绍了错误参考错误:未定义 TradingView的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

technical.component.html:

technical.component.ts:

import { Component, OnInit, AfterViewInit } from '@angular/core';声明 const TradingView: 任何;@成分({选择器:'应用技术'，templateUrl: './technical.component.html',styleUrls: ['./technical.component.scss']})导出类 TechnicalComponent 实现 OnInit, AfterViewInit {构造函数(){}ngOnInit() {}ngAfterViewInit(){新的 TradingView.widget({宽度":980，高度":610，符号":BTCUSD"，时区":Etc/UTC"，主题":光"，风格":1"，locale": en",toolbar_bg":#f1f3f6"，启用_发布":假，withdateranges":真，范围":年初至今"，hide_side_toolbar":假，allow_symbol_change":真，show_popup_button":真，popup_width":1000"，popup_height":650"，no_referral_id":真，container_id":tradingview_bac65"；});}}

technical.component.scss:

.example-form {最小宽度:150px；最大宽度:500px；宽度:70%；}.example-全宽{宽度:70%；}.中央 {显示:弹性；对齐内容:居中；}.边距{宽度:100%；边距顶部:20px；底边距:20px；}

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

ERROR ReferenceError: TradingView 未定义

我必须提一下，这段代码在我以前的应用程序中有效，只是将其复制到我的新应用程序中不起作用！

解决方案

尝试在 Renderer2 和 ViewChild

的帮助下动态加载

原始 TradingView 小部件代码

<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>通过交易视图

<script type="text/javascript";src=https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js"异步>{符号":CEXIO:MHCUSD"，宽度":350，颜色主题":光"，isTransparent":真，语言环境":en"}

<!-- TradingView Widget END-->

Angular HTML 模板

<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"目标=_blank"><span class="blue-text">MHCUSD Rates</span></a>通过交易视图

<div #tradingview></div>

<!-- TradingView Widget END -->

角度组件

import { AfterViewInit, ElementRef, Renderer2, ViewChild } from '@angular/core';从@angular/core"导入{组件}；@成分({选择器:'app-splash-right'，templateUrl: './splash-right.component.html',styleUrls: ['./splash-right.component.less']})导出类 SplashRightComponent 实现 AfterViewInit {@ViewChild('tradingview') 交易视图?:ElementRef;构造函数(私有_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";脚本.文本 = `{符号":CEXIO:MHCUSD"，宽度":350，颜色主题":光"，isTransparent":真，语言环境":en"}`;this.tradingview?.nativeElement.appendChild(script);}}

I am trying to show TradingView's widget on my Angular app using following codes:

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

But it doesn't show the widget in the browser and I see the following error in the console:

ERROR ReferenceError: TradingView is not defined

I must mention that this code was working on my previous app and just copied it in my new app bud doesn't work!

解决方案

Try loading it dynamically with the help of Renderer2 and ViewChild

Original TradingView widget code

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

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

Angular component

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

这篇关于错误参考错误:未定义 TradingView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆