Angular 2指令：如何在指令中創建echarts實例？

Question

目的：我想建立一個簡單的角度2指令的ECharts（圖表庫）

---

詳細：

我ngAfterViewInit()創建圖表，並首次，它可以工作，圖表在調整窗口大小時會調整大小。

然後我點擊另一個頁面，ngOnDestroy()運行，圖表被銷燬。

然後我回到圖表頁面，圖表被重新創建，但是，這個時候圖表在調整窗口大小時不會調整大小，並且console.log(chart)返回'undefined'而不是echarts實例。

如何再次獲得echarts實例並使其可調整大小？

---

所有代碼：

下面是EChartsDirective爲ECharts所有代碼：

import { Directive, ElementRef, Input } from '@angular/core'; 
let echarts = require('echarts'); 

@Directive({ selector: '[myECharts]' }) 

export class EChartsDirective { 
    el: ElementRef; 
    constructor(el: ElementRef) { 
     this.el = el; 
    } 

    @Input() EChartsOptions: any; 
    private mychart; 


    ngAfterViewInit() { 
     let chart = this.mychart = echarts.init(this.el.nativeElement); 

     if (!this.EChartsOptions) return; 

     this.mychart.setOption(this.EChartsOptions); 

     $(window).on('resize', function(){ 
      console.log(chart); 
      chart.resize(); // <- this only works for the first time 
          // if I change to another page, then back to chart page, it will return 'undefined' 
          // the chart is still there, but won't resize on window resize any more 
     }) 
    } 

    ngOnDestroy() { 
     if (this.mychart) { 
      this.mychart.dispose(); 
     } 
    } 
} 

Answer 1

ngAfterViewInit() { 
     this.mychart = echarts.init(this.el.nativeElement); 
     if (!this.EChartsOptions) return; 

     this.mychart.setOption(this.EChartsOptions); 
    } 

    @HostListener('window:resize) 
    onResize() { 
     console.log(chart); 
     if(this.mychart) { 
      this.mychart.resize(); 
     } 
    }