ag-grid中getColumnState在ngOnDestroy内无法获取列状态问题

确实无法在Angular的ngOnDestroy钩子中正常调用AG Grid的getColumnState API。当组件进入ngOnDestroy阶段时，AG Grid已经启动内部销毁流程，列状态相关的内部数据已被清理，因此调用该方法会返回空数组。

AG Grid官方目前暂不支持在组件销毁阶段获取列状态，该问题已得到官方团队的确认，相关详情可参考官方的问题追踪（编号6983）。

替代解决方案 #

• 避免等到组件销毁时才保存列状态，改为在列状态发生变更的实时节点进行保存：
  • 监听AG Grid的columnStateChanged事件，每次列状态（如列宽、排序、显示隐藏等）改变时，立即调用getColumnState获取状态并存储（比如存入localStorage或后端服务）
  • 示例代码：

    // 初始化时监听列状态变更事件
    this.gridApi?.addEventListener('columnStateChanged', () => {
      const currentColumnState = this.columnApi?.getColumnState();
      if (currentColumnState) {
        localStorage.setItem('ag_grid_column_state', JSON.stringify(currentColumnState));
      }
    });
    

• 页面再次加载时，从存储中读取保存的状态，通过applyColumnState方法恢复列配置：

  // 组件初始化时恢复列状态
  const savedColumnState = localStorage.getItem('ag_grid_column_state');
  if (savedColumnState && this.columnApi) {
    this.columnApi.applyColumnState({ state: JSON.parse(savedColumnState) });
  }
  

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