将 TradingView 小部件嵌入到角度组件中答案

【问题标题】：Embed TradingView widgets into angular components将 TradingView 小部件嵌入到角度组件中
【发布时间】：2020-06-02 08:42:51
【问题描述】：

我正在尝试制作一个使用交易视图小部件的角度项目。问题是当我在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';
}

我尝试了Embed Tradingview into 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

【问题讨论】：

这能回答你的问题吗？ Embed Tradingview into Angular 5
不幸的是，没有。那是我已经尝试过的链接。我是 Angular 的新手，我似乎无法围绕这些答案来思考:(
Angular 远非初学者的东西...... jQuery 是一个可爱的小工具箱，但 Angular 完全不同
将此行<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script> 放在您的组件中，而不是放在index.html 的<head> 标记中。它会在你的 Angular 应用启动之前定义window.TradingView
简单，就是定义TradingView对象的脚本。所以，它必须放在其他所有东西之前，然后你可以使用TradingView :) 我写了我的评论作为答案，你能把它标记为接受吗？

标签： javascript html css angularjs widget

【解决方案1】：

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

【讨论】：