Angular ag-grid：缓存块全部加载完成的通知事件咨询

在使用ag-grid服务器端行模型（SSRM）并结合分组展开的场景下，你可以通过监听cacheBlockLoaded事件替代setTimeout轮询，精准判断第一页缓存块（包括分组展开后加载的子数据块）是否完全加载完成，再执行页面跳转操作。

核心思路 #

• cacheBlockLoaded事件会在每个缓存块加载完成后触发，包括分组展开时自动加载的子数据块
• 结合getCacheBlockState()方法获取所有缓存块的状态，判断第一页相关的所有块是否都已加载完成
• 满足条件后调用paginationGoToPage()跳转，并移除事件监听避免重复触发

代码实现示例 #

// 配置gridOptions
const gridOptions = {
  serverSideRowModel: true,
  pagination: true,
  paginationPageSize: 10, // 替换为你的每页条数
  rowGroupPanelShow: 'always',
  // 初始化展开所有分组
  onFirstDataRendered: (params) => {
    params.api.expandAll();
  },
  // 监听缓存块加载完成事件
  onCacheBlockLoaded: (params) => {
    const api = params.api;
    const pageSize = api.paginationGetPageSize();
    // 第一页的行范围（ag-grid行索引从0开始）
    const firstPageStart = 0;
    const firstPageEnd = pageSize - 1;

    // 获取所有缓存块状态
    const cacheBlocks = api.getCacheBlockState();
    // 检查第一页覆盖的所有缓存块是否都已加载
    const allFirstPageBlocksLoaded = cacheBlocks.every(block => {
      // 判断当前块是否和第一页范围有重叠
      const overlapsWithFirstPage = block.startRow <= firstPageEnd && block.endRow >= firstPageStart;
      // 重叠的块必须处于loaded状态，非重叠的块不影响
      return !overlapsWithFirstPage || block.state === 'loaded';
    });

    // 额外校验：确保第一页的展示行数符合预期（处理分组展开后的行计数）
    const displayedRowCount = api.getDisplayedRowCount();
    const isFirstPageFullyLoaded = allFirstPageBlocksLoaded && displayedRowCount >= pageSize;

    if (isFirstPageFullyLoaded) {
      // 读取路由中的pageNum参数（注意ag-grid页码是0-based，需转换）
      const urlParams = new URLSearchParams(window.location.search);
      const targetPage = urlParams.get('pageNum');
      if (targetPage) {
        const zeroBasedPage = parseInt(targetPage) - 1;
        api.paginationGoToPage(zeroBasedPage);
        // 移除监听，避免后续缓存块加载时重复触发跳转
        api.removeEventListener('cacheBlockLoaded', gridOptions.onCacheBlockLoaded);
      }
    }
  }
};

关键细节说明 #

1. 页码转换：ag-grid的paginationGoToPage()接受0-based的页码参数，而你的路由参数是1-based（如pageNum=2），需要做减1转换
2. 移除事件监听：跳转完成后记得移除cacheBlockLoaded监听，避免后续其他缓存块加载时重复执行跳转逻辑
3. 分组展开的适配：expandAll()会触发ag-grid自动加载分组子数据，cacheBlockLoaded会捕获这些子数据块的加载完成事件，确保第一页的分组数据全部加载完毕

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