Как я могу отобразить пользовательские виджеты 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>