Angular 16迁移后ngOnDestroy未触发，Chart.js画布复用报错

问题原因 #

1. Angular 16组件销毁逻辑变更：Angular 16对组件生命周期的检测和销毁机制做了优化，若组件采用OnPush变更检测策略，或是使用async管道时未正确处理订阅，可能导致ngOnDestroy未按预期触发。另外，若使用了独立组件，其销毁逻辑也与旧版本存在差异。
2. Chart.js 3.x实例管理更严格：Chart.js 3.x不再自动销毁实例，相比2.x，对Canvas资源的占用管控更严，必须显式调用chart.destroy()释放资源。一旦ngOnDestroy未触发，实例会一直占用Canvas，切换组件复用Canvas时就会抛出错误。
3. 生命周期钩子实现错误：比如ngOnDestroy方法拼写错误（如写成ngOnDestory），或是组件被其他服务/父组件持有引用，导致Angular无法正确销毁组件实例。

解决办法 #

1. 确保ngOnDestroy正确实现 #

• 先检查方法拼写，必须是ngOnDestroy()，注意大小写和字母完整性。
• 若使用独立组件，务必实现OnDestroy接口：

  import { Component, OnDestroy } from '@angular/core';
  import Chart from 'chart.js/auto';
  
  @Component({
    selector: 'app-your-chart',
    templateUrl: './your-chart.component.html'
  })
  export class YourChartComponent implements OnDestroy {
    private chartInstance: Chart | undefined;
  
    ngOnDestroy(): void {
      this.chartInstance?.destroy();
    }
  }
  

2. 增加实例销毁的兜底逻辑 #

• 可以结合@ViewChild获取Canvas元素，在组件销毁时强制销毁实例：

  import { Component, ViewChild, ElementRef, OnDestroy } from '@angular/core';
  import Chart from 'chart.js/auto';
  
  @Component({
    selector: 'app-chart',
    template: '<canvas #chartCanvas></canvas>'
  })
  export class ChartComponent implements OnDestroy {
    @ViewChild('chartCanvas') chartCanvas!: ElementRef<HTMLCanvasElement>;
    private chart: Chart | undefined;
  
    ngAfterViewInit(): void {
      this.chart = new Chart(this.chartCanvas.nativeElement, {
        // 图表配置项示例
        type: 'line',
        data: {/* 数据内容 */},
        options: {/* 配置选项 */}
      });
    }
  
    ngOnDestroy(): void {
      if (this.chart) {
        this.chart.destroy();
        this.chart = undefined; // 主动释放引用
      }
    }
  }
  

• 若通过路由切换组件，可在路由守卫的canDeactivate钩子中手动触发销毁逻辑，确保离开组件时执行实例销毁。

3. 排查变更检测策略问题 #

• 若组件使用changeDetection: ChangeDetectionStrategy.OnPush，需确保组件的输入属性或订阅的可观察对象变化能被正确检测，避免Angular判定组件无需更新而跳过销毁流程。
• 对于使用async管道的场景，确保订阅的可观察对象在组件销毁时能自动完成，或是用takeUntil操作符手动取消订阅。

4. 优化Chart.js初始化逻辑 #

• 每次创建Chart实例前，先检查Canvas是否已有实例存在，若有则先销毁再创建新实例：

  ngAfterViewInit(): void {
    // 检查并销毁已有实例
    const existingChart = Chart.getChart(this.chartCanvas.nativeElement);
    if (existingChart) {
      existingChart.destroy();
    }
    // 创建新实例
    this.chart = new Chart(this.chartCanvas.nativeElement, { /* 配置内容 */ });
  }
  

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