将 TradingView 小部件嵌入到 angular 组件中

Question

I was trying to make an angular project where I am using trading view widgets.我正在尝试制作一个 angular 项目，我正在使用交易视图小部件。 The problem is that the widgets work fine when I use them in index.html , but I want to use them as components for the website.问题是当我在index.html中使用这些小部件时，它们可以正常工作，但我想将它们用作网站的组件。 I try to include the widget in app.component.html but the widget code doesn't work there.我尝试在app.component.html中包含小部件，但小部件代码在那里不起作用。 I'm new to angular and don't know what changes I am supposed to make in app.component.ts .我是 angular 的新手，不知道我应该在app.component.ts中进行哪些更改。 Could someone help me out here?有人可以帮我吗？ This is the code for index.html :这是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>

And here is the app.component.ts :这是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';
}

I tried the methods given by people Embed Tradingview into Angular 5我尝试了人们提供的方法Embed Tradingview into Angular 5

I can't seem to understand the implementation.我似乎无法理解实现。 Again, I'm very new to angular and infact html and css too.同样，我对 angular 和事实上 html 和 css 也很陌生。 Could someone help me out?有人可以帮我吗？

Edit: This is the component.ts that I tried to inregrate for (Advanced Real Time chart)[ https://in.tradingview.com/widget/advanced-chart/]编辑：这是我试图整合的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"
    }
      );
  }

}

And here is the html file for the same:这是相同的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 -->

The given code gives a console error: ReferenceError: TradingView is not defined给定的代码给出了一个控制台错误： ReferenceError: TradingView is not defined

Answer 1

Put this line <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script> not in your component, but in index.html in the <head> tag.将此行<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>放在您的组件中，而不是放在<head>标记的index.html中. It will define window.TradingView before your Angular app starts up.它将在您的 Angular 应用程序启动之前定义window.TradingView 。

将 TradingView 小部件嵌入到 angular 组件中

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-06-03 16:52:05

将 TradingView 小部件嵌入到 angular 组件中

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-06-03 16:52:05

解决方案1
2 已采纳 2020-06-03 16:52:05