Javascript 谷歌图表和角度2-一个图形赢得'；不显示

我正在学习Angular 2，作为练习，我想使用谷歌图表API。
这是我的组件，我想在其中有一个图表：

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

import { WeatherAPIService } from './weatherAPI.service';

declare var google: any;


@Component({

  selector: 'my-graphs',

  template: `<h1>Charts for {{this.weatherAPIService.cityName}}</h1>
            <div id="chart_div"></div>            
            `,

  providers: [WeatherAPIService]
})

export class GraphsComponent implements OnInit {

    //googleLoaded;

    constructor(
                  private weatherAPIService: WeatherAPIService

            ) { }

    drawChart () {

      console.log(google.visualization);

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);


              // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                      'width':400,
                      'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);

    }

    loadGoogleChart() {
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(() => this.drawChart);

    }



    ngOnInit(): void {
        this.loadGoogleChart();
    }


}

从'@angular/core'导入{Component，OnInit}；
从“./weatherAPI.service”导入{WeatherAPIService}；
声明：任何；
@组成部分({
选择器：“我的图形”，
模板：{{this.weatherAPIService.cityName}的图表
`,
提供商：[天气预报服务]
})
导出类GraphComponent实现OnInit{
//谷歌加载；
建造师(
私人weatherAPIService:weatherAPIService
) { }
图纸（）{
log（google.visualization）；
//创建数据表。
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Topping'）；
data.addColumn（'number'，'Slices'）；
data.addRows([
[‘蘑菇’，3]，
[‘洋葱’，1]，
[Olives'，1]，
[‘西葫芦’，1]，
[意大利香肠，2]
]);
//设置图表选项
var options={'title'：'我昨晚吃了多少比萨饼'，
“宽度”：400，
‘高度’：300}；
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
图表绘制（数据、选项）；
}
谷歌图表{
load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（（）=>this.drawChart）；
}
ngOnInit（）：void{
这个.loadGoogleChart（）；
}
}

如果我理解正确，我应该只调用这个.loadGoogleChart（）函数，因为其中有一个对drawChart（）的回调，所以我自己不需要调用drawChart（）。不幸的是，当我运行它时，我没有看到任何东西-该组件只有

标题，这是我在模板中设置的，但是chart\u div只是空的

我做错了什么？ 我看到了一个类似的问题： 但是在这种情况下，当console.log（google.visualization）出现时，问这个问题的人得到了一些结果；有人打电话来。我在控制台中没有看到任何消息。

---

所以，我猜drawChart（）从未被调用过。原因是什么？

我对Angular 2的生命周期不太熟悉，但在Angular 1.x中广泛使用Google图表，我认为您的代码示例没有反映出框架和库之间配对的复杂性

您将面临的最大问题之一是，您只能在google图表上调用load一次。在它已经加载之后，如果您再次调用load，它将不会触发您的回调。这意味着在组件级别处理负载通常不合适。如果您更改状态，并且该组件消失，则无法处理loaders服务已经存在的事实

此外，您只能有一个回调，因此如果您同时加载了多个组件，那么一个组件将重写另一个来自google charts的回调，并且您将在wins中得到最后一个回调

我不能就Angular 2的细节提供建议，因为我不是最新的框架，但请记住，这个问题太复杂了，不能用几行代码来处理。不过，我确实鼓励你努力克服它。在我发现之前，我看到过一种骇人的方法，那就是延迟角度引导，直到加载GoogleCharts库。这样，您可以对所有代码持乐观态度，并假设已经加载了GoogleCharts库。不知道这是否适用于Angular 2。

在您的线路上

google.charts.setOnLoadCallback（（）=>this.drawChart）
你能把它改成
google.charts.setOnLoadCallback（（）=>this.drawChart（））

此外，还有一个普遍存在的错误，即无法为后续调用重新初始化图表。我想它已经更新了，但我还没有检查。无论如何，你总是可以有这个功能
checkload（）：布尔值{
return！（（typeof google=='undefined'）| |（typeof google.visualization=='undefined'））；
}

您将调用它以查看它之前是否已加载，以便忽略初始化它的后续调用