将 TradingView 小部件嵌入 angular 个组件

Question

我正在尝试创建一个 angular 项目，我在其中使用交易视图小部件。问题是当我在 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';
}

大家给的方法我都试过了

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

编辑：这是我试图为（高级实时图表）[https://in.tradingview.com/widget/advanced-chart/]

注入的 component.ts

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

Answer 1

不要将这一行 <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script> 放在您的组件中，而是放在 <head> 标记中的 index.html 中。它将在您的 Angular 应用程序启动之前定义 window.TradingView。

将 TradingView 小部件嵌入 angular 个组件

Embed TradingView widgets into angular components

html

javascript

css

widget

angularjs