angular2 chart and events

Question

私はangular2アプリケーションでzingchartを使用していますが、この問題が発生しました。 グラフのデータが変更されました。グラフを再レンダリングする必要がありますが、その方法はわかりません。 これは、zing chartチームが私の再レンダリングボタンを提供したplunkrです。私はチャートを再レンダリングする方法を知らない。 https://plnkr.co/edit/OjqvVPiyKBUJbKgcLi6A?p=preview

import {bootstrap} from 'angular2/platform/browser'; 
import {Component, NgZone, AfterView, OnDestroy} from 'angular2/core' 

class Chart { 
    id: String; 
    data: Object; 
    height: any; 
    width: any; 
    constructor(config: Object) { 
    this.id = config['id']; 
    this.data = config['data']; 
    this.height = config['height'] || 300; 
    this.width = config['width'] || 600; 
    } 
} 

@Component({ 
    selector : 'zingchart', 
    inputs : ['chart'], 
    template : ` 
    <div id='{{chart.id}}'></div> 
    ` 
}) 
class ZingChart implements AfterView, OnDestroy { 
    chart : Chart; 
    constructor(private zone:NgZone) { 
    } 

    ngAfterViewInit() { 
     this.zone.runOutsideAngular(() => { 
      zingchart.render({ 
       id : this.chart['id'], 
       data : this.chart['data'], 
       width : this.chart['width'], 
       height: this.chart['height'] 
      }); 
     }); 
    } 
    ngOnDestroy() { 
     zingchart.exec(this.chart['id'], 'destroy'); 
    } 
} 

//Root Component 
@Component({ 
    selector: 'my-app', 
    directives: [ZingChart] 
    template: ` 
    <zingchart *ngFor="#chartObj of charts" [chart]='chartObj'></zingchart> 
    <button type="button" class="btn btn-default" (click)="rerender()">re-render</button> 
    `, 
}) 
export class App { 
    charts : Chart[]; 
    constructor() { 
    this.name = 'Angular2' 
    this.charts = [{ 
     id : 'chart-1', 
     data : { 
     type : 'line', 
     series : [{ 
      values :[2,3,4,5,3,3,2] 
     }], 
     }, 
     height : 400, 
     width : 600 
    }] 
    } 

    rerender(){ 
    alert("please help me don't know what to write here"); 
    } 
} 


bootstrap(App, []) 
    .catch(err => console.error(err)); 

Answer 1

私は@ViewChildデコレータを使用して、親1からグラフコンポーネントを参照します：

@Component({ 
    selector: 'my-app', 
    directives: [ZingChart] 
    template: ` 
    <zingchart *ngFor="#chartObj of charts" [chart]='chartObj'></zingchart> 
    <button type="button" class="btn btn-default" (click)="rerender()">re-render</button> 
    `, 
}) 
export class App { 
    charts : Chart[]; 

    @ViewChild(ZingChart) 
    chart: ZingChart; 

    (...) 
} 

あなたは、チャートコンポーネント自体にメソッドを呼び出すことができるようになります。この道を。 A例えば1レンダリング：

@Component({ 
    (...) 
}) 
export class App { 
    (...) 
    rerender(){ 
    this.chart.render(); 
    } 
} 

このplunkrを参照してください：https://plnkr.co/edit/NggADnGRbw4TsYiIUsh3?p=preview