Angular-Slickgrid创建后如何更新网格状态？

当Angular-Slickgrid实例创建完成后，仅修改gridOptions.presets不会自动触发网格更新，必须通过官方提供的API方法强制应用新状态。以下是具体实现步骤：

1. 获取网格服务实例 #

在组件中通过ViewChild获取AngularSlickgridComponent实例，以此访问核心操作APIgridService：

import { Component, ViewChild } from '@angular/core';
import { AngularSlickgridComponent } from '@slickgrid/angular';
import { GridOption } from '@slickgrid/universal';

@Component({
  selector: 'app-your-grid',
  templateUrl: './your-grid.component.html'
})
export class YourGridComponent {
  @ViewChild('angularSlickgrid') angularSlickgrid!: AngularSlickgridComponent;
  gridOptions: GridOption = {
    // 你的初始网格配置
  };
}

2. 监听本地存储变化并应用新状态 #

通过storage事件监听本地存储的状态变更，读取最新状态后调用API更新网格：

ngOnInit() {
  // 监听同源页面的本地存储变化
  window.addEventListener('storage', (event) => {
    // 替换为你存储网格状态的key
    if (event.key === 'saved-grid-state') {
      const newGridState = JSON.parse(event.newValue || '{}');
      
      // 可选：同步更新gridOptions.presets，保持配置一致性
      this.gridOptions.presets = { gridState: newGridState };

      // 强制应用新的网格状态
      this.angularSlickgrid.gridService.applyGridState(newGridState);
    }
  });
}

3. 若需应用完整预设（含列配置） #

如果你的保存内容包含列定义等完整预设信息，可使用applyPreset方法：

const newPreset = {
  columns: [...], // 最新列配置
  gridState: {...} // 最新网格状态
};

// 同步更新presets
this.gridOptions.presets = newPreset;
// 应用完整预设
this.angularSlickgrid.gridService.applyPreset(newPreset);

关键说明 #

• applyGridState：仅覆盖当前网格的状态（排序、过滤、列顺序、列宽等），适合仅更新状态的场景。
• applyPreset：同时更新列配置和网格状态，适合需要同步列结构的场景。

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