Angular中AmCharts4销毁后重建报EventDispatcher is disposed错误如何修复？

该报错由两个常见场景触发：

1. am4core.createDeferred为异步方法，当组件快速销毁/重建时，ngOnDestroy触发后，未执行完成的异步创建逻辑仍会尝试操作已被标记为销毁的实例，触发事件分发器相关报错
2. 图表销毁后未清空容器残留内容，新创建的图表会绑定到存在旧实例残留的容器上，导致实例引用冲突

1. 新增组件销毁状态标记，拦截销毁后的异步逻辑 #

2. 图表销毁后清空容器内容，保证新实例创建环境纯净 #

3. 调整创建/销毁逻辑的执行顺序，避免半初始化的实例被操作 #

修改后完整代码如下：

// 新增销毁状态标记
private isDestroyed = false;

ngAfterViewInit() {
    this.browserOnly(() => {
        // 组件已销毁则直接终止逻辑
        if (this.isDestroyed) return;

        const config = _.assign({}, this.config, {
            data: this.data
        });

        am4core.createDeferred(() => {
            // 异步回调内再判断一次销毁状态
            if (this.isDestroyed) return null;
            this.chart = am4core.createFromConfig(config, this.chartContainerEl.nativeElement);
            return this.chart;
        }).then((chart) => {
            if (this.isDestroyed && chart) {
                // 拿到回调结果时组件已销毁，直接销毁刚创建的实例
                chart.dispose();
                return;
            }
            this.chart = chart;
            // 后续图表自定义逻辑写在这里
        });
    });
}

ngOnDestroy() {
    this.browserOnly(() => {
        // 先标记销毁状态，拦截所有后续异步逻辑
        this.isDestroyed = true;
        if (this.chart) {
            this.chart.dispose();
            this.chart = null;
        }
        // 清空容器内的所有残留内容
        if (this.chartContainerEl?.nativeElement) {
            this.chartContainerEl.nativeElement.innerHTML = '';
        }
    });
}

• 不要复用已经销毁过的AmCharts相关实例（如series、axis、光标、tooltip等），传入createFromConfig的config对象内所有配置项如果引用了之前的图表实例，需要重新创建
• 如果你的组件是在同一个路由下复用（如标签页切换场景），可以额外在ngOnChanges里监听config/data的变更，主动更新图表而不是销毁重建，也能避免该类报错

内容的提问来源于stack exchange，提问作者Isa