Javascript 谷歌图表“；“未定义容器”；当路线以角度4变化时

我正在使用Google图表和Angular 4，当我转到另一条路线并返回时，我得到了错误

错误：容器未定义

这是我的组件

ngOnInit() {

    this.service.getData().subscribe(
        res => {
            this.controlData = res;
            this.createCharts(this.year);
        }
    );

}

createCharts(resultYears: any) {
    google.charts.load('current', {'packages': ['bar']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      const data = new google.visualization.DataTable();

      // Declare columns
      data.addColumn('string', 'Year');
      data.addColumn('number', 'Pendiente');
      data.addColumn('number', 'En Proceso');
      data.addColumn('number', 'No Recuperada');
      data.addColumn('number', 'Recuperada');

      // Add data.
      for (const chartData of resultYears) {
        data.addRow([chartData['year'].toString(), chartData['pendiente'], chartData['enproceso'], chartData['norecuperada'], chartData['recuperada']]);
      }

      const options = {
        height: 400,
        isStacked: true,
        vAxis: {format: 'decimal'},
        hAxis: {format: ''},
        series: {
          0: {color: '#fdd835'},
          1: {color: '#0091ff'},
          2: {color: '#e53935'},
          3: {color: '#43a047'},
        }
      };

      const chart = new google.charts.Bar(document.getElementById('initial_chart_div'));

      chart.draw(data, google.charts.Bar.convertOptions(options));

    }
  }

这是我的html

<div id="initial_chart_div"></div>



一切正常，我可以看到图表，但如果我在/ChartUrl中，移动到/AnotherUrl，然后返回到/ChartUrl，我会收到错误
错误：未定义容器

谢谢你的阅读

注意：
console.log（document.getElementById（'initial_chart_div'））
始终为空，除非在
函数drawChart（）中
我使用
setTimeout
内部
drawChart
函数解决它

function drawChart() {

      setTimeout(() => {
        data = new google.visualization.DataTable();

        // Declare columns
        data.addColumn('string', 'Año');
        data.addColumn('number', 'Pendiente');
        data.addColumn('number', 'En Proceso');
        data.addColumn('number', 'No Recuperada');
        data.addColumn('number', 'Recuperada');
        data.addColumn('number', 'Presentada');

        // Add data.
        for (const chartData of context.year) {
          data.addRow([chartData['año'].toString(), chartData['pendiente'], chartData['enproceso'], chartData['norecuperada'], chartData['recuperada'], chartData['presentada']]);
        }

        chart = new google.charts.Bar(context.chartDiv.nativeElement);
        chart.draw(data, google.charts.Bar.convertOptions(options));

        google.visualization.events.addListener(chart, 'select', () => {
          const selection = chart.getSelection()[0];

          if (selection && selection.row !== null) {
            const row = selection.row;
            const column = selection.column;
            data.getValue(row, 0);
            data.getColumnLabel(column);

            context.dataGridGrupoEstado.selected = context.arrGrupoEstado.filter(me => me.grupoEstado === data.getColumnLabel(column).toLowerCase());
            context.dataGridYear.selected = context.arrYears.filter(ye => ye.year.toString() === data.getValue(row, 0));
            context.drawGridYear(parseInt(data.getValue(row, 0), 10));
            context.router.navigate(['/control de recuperos'], { queryParams: { year: context.dataGridYear.selected[0].year, grupoE: context.dataGridGrupoEstado.selected[0].grupoEstado }});
          }
        });
      }, 10);

问题似乎出在你的html上。您是否在组件中使用模板？你能把剩下的代码发布出来吗？或者更好的是发布一个plunkr？@GordonMohrin我这样做是为了模拟我的代码，但在这里它可以正常工作