javascript - 将 TradingView 小部件嵌入到角度组件中

问题描述

我正在尝试制作一个使用交易视图小部件的角度项目。问题是当我在中使用小部件时它们工作正常index.html，但我想将它们用作网站的组件。我尝试在其中包含小部件，app.component.html但小部件代码在那里不起作用。我是 Angular 新手，不知道我应该在app.component.ts. 有人可以帮我吗？这是代码index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>News</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
  <div class="container">
    <h1>Forex Rates</h1>
    <!-- TradingView Widget BEGIN -->
    <div class="tradingview-widget-container">
      <div class="tradingview-widget-container__widget"></div>
      <!-- <div class="tradingview-widget-copyright"><a href="https://in.tradingview.com/markets/currencies/forex-cross-rates/" rel="noopener" target="_blank"><span class="blue-text">Forex Rates</span></a> by TradingView</div> -->
      <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-forex-cross-rates.js" async>
      {
      "width": 840,
      "height": 400,
      "currencies": [
        "EUR",
        "USD",
        "JPY",
        "GBP",
        "CHF",
        "AUD",
        "CAD",
        "NZD",
        "CNY",
        "INR"
      ],
      "isTransparent": true,
      "colorTheme": "light",
      "locale": "in"
    }
      </script>
    </div>
    <!-- TradingView Widget END -->
  </div>
</body>
</html>

这是app.component.ts：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'news';
}

我尝试了人们将 Tradingview 嵌入 Angular 5给出的方法

我似乎无法理解实现。同样，我对角度和事实上的 html 和 css 也很陌生。有人可以帮我吗？

编辑：这是component.ts我试图重新整合的（高级实时图表）[ https://in.tradingview.com/widget/advanced-chart/]

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

declare const TradingView: any;

@Component({
  selector: 'app-tradingview',
  templateUrl: './trading-view.component.html',
  styleUrls: ['./trading-view.component.css']
})

export class TradingviewComponent implements OnInit, AfterViewInit {

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit(){
    new TradingView.widget(
      {
      "width": 980,
      "height": 610,
      "symbol": "NASDAQ:AAPL",
      "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"
    }
      );
  }

}

这是html相同的文件：

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
    <div id="tradingview_bac65"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script type="text/javascript">

    </script>
  </div>
<!-- TradingView Widget END -->

给定的代码给出了一个控制台错误： ReferenceError: TradingView is not defined

标签： javascripthtmlcssangularjswidget

javascript - 将 TradingView 小部件嵌入到角度组件中

问题描述

解决方案

推荐阅读