Angular 5组件视图无法渲染TradingView组件脚本求助

Hey there! Let's get your TradingView widget working in your Angular 5 component. The issues you're facing are common for Angular beginners, so let's break down what's wrong and how to fix it:

Why Your Current Approach Isn't Working #

1. Angular Sanitizes Component Templates: Angular automatically removes <script> tags from component HTML files as a security measure. That's why the script in your component's template doesn't run, even though it works in index.html.
2. TypeScript Doesn't Recognize Global Variables: When you call new TradingView.widget() directly in ngOnInit, TypeScript throws an error because it doesn't know about the global TradingView object loaded from the external script.
3. DOM Isn't Ready in ngOnInit: Even if you got past the TypeScript error, ngOnInit runs before your component's DOM is fully rendered—so the widget wouldn't have a place to attach itself.

Step-by-Step Solution #

1. Load the TradingView Script in index.html

First, keep the tv.js script in your index.html (this is the only place Angular won't block it). Add it to the end of the <body> tag to ensure it loads after the DOM is ready:

<!-- In src/index.html -->
<body>
  <app-root></app-root>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
</body>

2. Update Your Component TypeScript File

Modify your tradingchart.component.ts to:

• Declare the global TradingView variable so TypeScript recognizes it
• Use ngAfterViewInit (instead of ngOnInit) to initialize the widget once the DOM is ready
• Specify a container element for the widget to attach to

Here's the updated code:

import { Component, OnInit, AfterViewInit } from '@angular/core';

// Declare the global TradingView variable to avoid TypeScript errors
declare var TradingView: any;

@Component({
  selector: 'app-tradingchart',
  templateUrl: './tradingchart.component.html',
  styleUrls: ['./tradingchart.component.css']
})
export class TradingchartComponent implements OnInit, AfterViewInit {

  constructor() { }

  ngOnInit() {
    // We'll leave this empty since initialization needs to happen after the DOM is ready
  }

  ngAfterViewInit() {
    // Now the component's DOM is fully rendered, so we can create the widget
    new TradingView.widget({
      "width": 980,
      "height": 610,
      "symbol": "NASDAQ:AAPL",
      "interval": "D",
      "timezone": "Etc/UTC",
      "theme": "Light",
      "style": "1",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "enable_publishing": false,
      "allow_symbol_change": true,
      "hideideas": true,
      // Tell the widget to render inside our component's container div
      "container_id": "tradingview-container"
    });
  }

}

3. Add a Container Element to Your Component Template

Replace your component's HTML with a simple div that has an ID matching the container_id we specified in the widget config:

<!-- In tradingchart.component.html -->
<div id="tradingview-container"></div>

Why This Works #

• The script loads globally from index.html, so TradingView is available everywhere in your app.
• declare var TradingView: any tells TypeScript that this global variable exists, eliminating the compile error.
• ngAfterViewInit ensures the widget is created only after your component's DOM is fully ready, so the container div exists when the widget tries to attach to it.

That should get your TradingView chart rendering properly in your Angular 5 component!

内容的提问来源于stack exchange，提问作者dipoletechi