如何将TradingView嵌入Angular 8项目? [英] How to embed TradingView into Angular 8 project?
本文介绍了如何将TradingView嵌入Angular 8项目?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道如何将以下TradingView的代码嵌入到Angular 8项目中?
I am interested to know how can I embed the following TradingView's code to my Angular 8 project?
<!-- 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">
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"
}
);
</script>
</div>
<!-- TradingView Widget END -->
我还想知道如何从.csv
文件或URL地址(例如BTC网上价格)提供数据.
I also like to know how can I feed my data from a .csv
file or from a URL address(like BTC online price).
推荐答案
我可以这样解决我的问题:
I could solve my problem like this:
- 我在项目中创建了一个新组件,并将其命名为
tradingview
.然后,将以下代码添加到tradingview.component.ts
文件中:
- I created a new component in my project and named it
tradingview
. Then I added the following code into thetradingview.component.ts
file:
import { Component, OnInit, AfterViewInit } from '@angular/core';
declare const TradingView: any;
@Component({
selector: 'app-tradingview',
templateUrl: './tradingview.component.html',
styleUrls: ['./tradingview.component.scss']
})
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"
}
);
}
}
然后我将以下代码添加到tradingview.component.html
文件中:
Then I added following code into the tradingview.component.html
file:
<!-- 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 -->
似乎工作正常!
这篇关于如何将TradingView嵌入Angular 8项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文