如何在离子或角度页面中显示自定义JavaScript小部件

Question

我正在创建一个离子应用程序，该页面上我想在其中显示小部件的地方，但无法显示（我不确定在何处以及如何添加摘要）。

以下是窗口小部件的代码，这里是链接https://www.tradingview.com/widget/market-movers/ 。

谁能告诉我如何在角度页面或离子页面中添加此类嵌入式窗口小部件？

 <!-- 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/stocks-india/market-movers-gainers/" rel="noopener" target="_blank"><span class="blue-text">Stock Market</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-hotlists.js" async>
  {
  "exchange": "BSE",
  "showChart": true,
  "locale": "in",
  "largeChartUrl": "",
  "width": "400",
  "height": "600",
  "plotLineColorGrowing": "rgba(60, 188, 152, 1)",
  "plotLineColorFalling": "rgba(255, 74, 104, 1)",
  "gridLineColor": "rgba(242, 243, 245, 1)",
  "scaleFontColor": "rgba(214, 216, 224, 1)",
  "belowLineFillColorGrowing": "rgba(60, 188, 152, 0.05)",
  "belowLineFillColorFalling": "rgba(255, 74, 104, 0.05)",
  "symbolActiveColor": "rgba(242, 250, 254, 1)"
}
  </script>
</div>
<!-- TradingView Widget END -->

Answer 1

这是我在离子应用程序中所做的事情。

创建一个离子页面。 在组件打字稿文件中，添加以下代码

import { Component, OnInit } from '@angular/core';
declare var TradingView;

@Component({
  selector: 'app-stock-price',
  templateUrl: './stock-price.page.html',
  styleUrls: ['./stock-price.page.scss'],
})
export class StockPricePage implements OnInit {
  periods = ['1M', '3M', '1Y', '5Y', 'All'];
  stockChart: any;

  constructor() { }

  ngOnInit() {
    this.createStockPriceWidget();
  }

  createStockPriceWidget() {
    this.stockChart = new TradingView.MediumWidget(
        {
          container_id: 'tv-medium-widget',
          symbols: [
            [
              'NASDAQ',
              'AAPL'
            ],
          ],
          interval: '3M',
          greyText: 'Quotes by',
          exchange: 'CSE',
          gridLineColor: '#e9e9ea',
          fontColor: '#83888D',
          underLineColor: '#dbeffb',
          trendLineColor: '#4bafe9',
          width: '100%',
          height: '100%',
          locale: 'en',
        }
    );
  }

}

在HTML文件中，

<ion-header>
  <ion-toolbar>
    <ion-title>Stock information</ion-title>
    <ion-buttons slot="start">
      <ion-menu-button>
        <ion-icon color="light" removeSvgStroke src="./assets/icons/menu.svg"></ion-icon>
      </ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="tradingview-widget-container">
    <div id="tv-medium-widget"></div>
    <div class="tradingview-widget-copyright">
      <a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank">
        <span class="blue-text">Apple Quotes</span>
      </a> by TradingView</div>
  </div>
</ion-content>

在scss文件中

.stock-segment {
  ion-segment-button {
    min-width: 40px;
    font-weight: normal;
  }
}

.stock-price-chart {
  margin-top: 30px;
}

最后在Index.html文件中，在<app-root></app-root> ，参考以下js文件

<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>