angular - Angular 2指令:如何在指令中创建echarts实例？

目的：我试图为Echarts（一个图表库）构建一个简单的角度2指令
细节：
我在ngAfterViewInit()中创建图表，这是第一次，当调整窗口大小时，图表确实会调整大小。
然后我点击另一个页面，ngOnDestroy()运行，图表被销毁。
然后我单击Back to Chart页面，重新创建图表，但是，当窗口调整大小时，这次图表不会调整大小，并且console.log(chart)返回'undefined'而不是echarts实例。
如何重新获取Echarts实例并使其可调整大小？
所有代码：
以下是Echarts的所有EChartsDirective代码：

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();
        }
    }
}

最佳答案

    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();
        }
    }

关于angular - Angular 2指令:如何在指令中创建echarts实例？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42051975/