Угловая директива 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(); 
     } 
    }