如何在角度4应用程序中集成谷歌图表？

我读了SO问题here的答案,但我认为它不完整.基本上,我正在使用GoogleChartComponent和扩展它的另一个组件尝试与前一个答案相同的策略.出现两个错误,第一个是对子组件的super()缺少调用,第二个是在此代码中调用“new”

@H_403_3@createBarChart(element: any): any { return new google.visualization.BarChart(element); }

我收到错误“google.visualization.BarChart不是构造函数”.

我看到其中一条评论也提到了使用< ng-content>用于数据投影,但没有明确概述.

在尝试提出“好”的问题时,这是我的GoogleChartComponent：

@H_403_3@export class GoogleChartComponent implements OnInit { private static googleLoaded: any; constructor() { console.log('Here is GoogleChartComponent'); } getGoogle() { return google; } ngOnInit() { console.log('ngOnInit'); if (!GoogleChartComponent.googleLoaded) { GoogleChartComponent.googleLoaded = true; google.charts.load('current',{ 'packages': ['bar'] }); google.charts.setOnLoadCallback(() => this.drawGraph()); } } drawGraph() { console.log('DrawGraph base class!!!! '); } createBarChart(element: any): any { return new google.visualization.BarChart(element); } createDataTable(array: any[]): any { return google.visualization.arrayToDataTable(array); } }

我的子组件扩展了它：

@H_403_3@@Component({ selector: 'app-bitcoin-chart',template: ` <div id="barchart_material" style="width: 700px; height: 500px;"></div> `,styles: [] }) export class BitcoinChartComponent extends GoogleChartComponent { private options; private data; private chart; // constructor() { // super(); // console.log('Bitcoin Chart Component'); // } drawGraph() { console.log('Drawing Bitcoin Graph'); this.data = this.createDataTable([ ['Price','Coinbase','Bitfinex','Poloniex','Kraken'],['*',1000,400,200,500] ]); this.options = { chart: { title: 'Bitcoin Price',subtitle: 'Real time price data across exchanges',},bars: 'vertical' // required for Material Bar Charts. }; this.chart = this.createBarChart(document.getElementById('barchart_material')); this.chart.draw(this.data,this.options); } }