使用npm angular2-google-chart,如何在window.resize上绘制多个图表？

Question

我有两个图表,我加载在同一页面/组件上.我能够让它们在页面加载时显示得很好.我的网站是响应式的,我需要在window.resize上重绘图表.当只有一个图表时,一切正常,但当我向页面添加第二个图表时,只有第二个(最后一个)图表在window.resize上调整大小.我该如何解决？

我使用angular2 RC1,与angular2,谷歌,图表:" https://www.npmjs.com/package/angular2-google-chart "在GitHub上:" https://github.com/vimalavinisha/angular2-google-图表 "

index.html页面:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>  
   /* googleLoaded = false allows for more than one chart per page */
   var googleLoaded = false;
</script>

谷歌-charts.directive.ts:

import {
    Directive, 
    ElementRef,
    Input,
    OnInit } from '@angular/core';

declare var google       : any;
declare var googleLoaded : any;

@Directive( {
    selector: '[GoogleChart]',
    properties: [
        'chartType',
        'chartOptions',
        'chartData'
    ]
} )
export class GoogleChart implements OnInit {
    public _element : any;
    @Input( 'chartType')     public chartType    : string;
    @Input( 'chartOptions' ) public chartOptions : Object;
    @Input( 'chartData' )    public chartData    : Object;

    constructor( public element: ElementRef ) {
        this._element = this.element.nativeElement;
        //This is where I resize the charts, but it only resizes the last on on the page????
        window.onresize = ( e ) => {
            //you need to get all charts on the page somehow
            this.drawGraph(
                this.chartOptions,
                this.chartType, 
                this.chartData, 
                this._element
            )   
        }
    }

    ngOnInit() {
        if( !googleLoaded ) {
            googleLoaded = true;
            google.charts.load( 'current', { 'packages':['corechart', 'gauge'] } );
        }
        setTimeout( 
            () => this.drawGraph(
                this.chartOptions,
                this.chartType, 
                this.chartData, 
                this._element
            ), 500 );
    }

    drawGraph ( chartOptions, chartType, chartData, ele ) {
        google.charts.setOnLoadCallback( drawChart );
        function drawChart() {
            var wrapper;
            wrapper = new google.visualization.ChartWrapper( {
                chartType   : chartType,
                dataTable   : chartData ,
                options     : chartOptions || {},
                containerId : ele.id
            } );
            wrapper.draw();
        }
    }
}

我的组件显示图表:

<div id="bar_chart" class="google-chart"
    [chartData]="bar_ChartData" 
    [chartOptions] = "bar_ChartOptions" 
    chartType="BarChart" 
    GoogleChart
></div>
<div id="pie_chart" class="google-chart" 
    [chartData]="pie_ChartData" 
    [chartOptions] = "pie_ChartOptions" 
    chartType="PieChart" 
    GoogleChart
></div>

我能够为每个图表创建一个不同的指令并让它工作,但根据页面我可能需要使用4或5个不同的图表,它似乎有点多.

tl; dr:我使用带有angular2 rc1的谷歌图表,并且我会显示多个图表,但是当我调整页面大小时,只有最后一个图表重新绘制自己.如何在同一页面上重新绘制多个图表？