导航至其他组件前如何销毁ng2-charts以解决跳转报错页面崩溃问题

路由跳转时旧组件的ng2-charts关联Chart.js实例未被正确销毁、多个图表组件复用相同canvas ID导致DOM冲突是报错的核心原因。

• 移除canvas标签上的固定id属性：你当前所有路由组件的图表都使用了相同的id="barChart"，DOM中重复ID会直接导致渲染冲突，你已经使用了模板引用变量#barChart，无需额外指定固定ID，优化后的模板代码如下：

<canvas baseChart #barChart [datasets]="chartData" [labels]="barChartLabels"
[options]="barChartOptions" [chartType]="chartType"></canvas>

• 组件销毁时手动清理图表实例：在每个图表组件中引入BaseChartDirective，通过ngOnDestroy生命周期钩子主动销毁Chart实例，避免内存泄漏，参考TS代码：

import { BaseChartDirective } from 'ng2-charts';
import { Component, OnDestroy, ViewChild } from '@angular/core';

@Component({
  // 你的组件原有配置
})
export class YourChartComponent implements OnDestroy {
  @ViewChild(BaseChartDirective) private chart?: BaseChartDirective;

  ngOnDestroy(): void {
    // 组件销毁前主动销毁图表实例
    this.chart?.chart?.destroy();
  }
}

• 排查路由复用策略：如果你的项目配置了路由复用缓存，需要将包含图表的组件排除在复用规则之外，避免组件实例残留导致的重复渲染错误。
• 校验图表配置项：确保每次组件初始化时，chartData、barChartLabels、barChartOptions等绑定的配置都是当前组件独有的实例，不要和其他组件的配置共享引用。

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