时间戳

首页 > 解决方案 > 如何在离子或角度页面中显示自定义 javascript 小部件

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

问题描述

我正在创建一个离子应用程序，我想在页面上显示一个小部件但无法显示（我不确定在哪里以及如何添加片段）。

下面是小部件的代码，这里是链接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 -->

标签： javascriptangularionic-frameworkwidget

解决方案

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

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

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>

推荐阅读