路由切换返回AG-Grid组件时出现destroyed警告，如何解决？

算力阿峰

2026-7-29

解决AG-Grid路由切换后出现的API调用警告及内存泄漏问题

问题根源

组件路由切换被销毁后，之前对data Observable的订阅未取消，当data后续发出新值时，仍会尝试调用已销毁网格的setRowData方法；同时gridApi引用未清理，导致内存泄漏，触发AG-Grid的警告。

解决方案

通过以下步骤修复：

保存数据流订阅实例，在组件销毁时取消订阅
调用网格API前检查实例是否未销毁
组件销毁时清理gridApi引用

修改后的代码

import { Component, Input, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

export class YourGridComponent implements OnDestroy {
  gridApi: any;
  private dataSubscription?: Subscription;

  @Input()
  data: any;
  @Input()
  gridOptions: any;
  @Input()
  columnDefs: any;

  onGridReady(params: any) {
    this.gridApi = params.api;
    // 保存订阅对象，便于后续取消
    this.dataSubscription = this.data.subscribe((data: any) => {
      // 调用API前先判断网格是否未销毁
      if (this.gridApi && !this.gridApi.isDestroyed()) {
        this.gridApi.setRowData(data);
      }
    });
  }

  ngOnDestroy() {
    // 取消订阅，切断数据流与已销毁组件的关联
    this.dataSubscription?.unsubscribe();
    // 清空gridApi引用，消除内存泄漏
    this.gridApi = null;
  }
}