Angular调用Server Side Row Model时如何保留默认加载遮罩禁用数据加载spinner

步骤1：禁用AG Grid内置服务端加载spinner #

在网格配置gridOptions中添加配置项，直接关闭默认弹出的加载spinner：

gridOptions: GridOptions = {
  rowModelType: 'serverSide',
  // 禁用内置的服务端行加载spinner
  suppressServerSideRowsLoadingSpinner: true,
  // 其余原有网格配置保持不变
}

步骤2：声明加载状态控制变量 #

在组件类中声明变量，用于控制自定义全局遮罩的显示隐藏，同时用计数变量处理多并行请求的场景：

// 控制自定义遮罩显示状态
isCustomLoadingVisible: boolean = false;
// 统计正在进行的服务端请求数量，避免单请求结束提前关闭遮罩
private loadingRequestCount: number = 0;

步骤3：在服务端数据源钩子中联动加载状态 #

修改serverSideDatasource的getRows方法，在请求的全生命周期同步更新加载状态：

// 给网格实例设置服务端数据源
this.gridApi.setServerSideDatasource({
  getRows: (params: IServerSideGetRowsParams) => {
    // 请求发起时更新计数和遮罩状态
    this.loadingRequestCount++;
    this.isCustomLoadingVisible = true;

    // 调用你的业务数据接口
    this.yourDataService.getGridData(params.request).subscribe({
      next: (response) => {
        // 接口返回成功后回调AG Grid更新数据
        params.success({
          rowData: response.list,
          rowCount: response.total
        });
      },
      error: () => {
        // 接口异常时回调失败
        params.fail();
      },
      complete: () => {
        // 请求结束（无论成功失败）更新计数
        this.loadingRequestCount--;
        // 所有请求都完成后关闭遮罩
        if (this.loadingRequestCount === 0) {
          this.isCustomLoadingVisible = false;
        }
      }
    })
  }
})

步骤4：添加自定义加载遮罩到模板 #

在AG Grid容器外层添加遮罩元素，绑定加载状态变量，实现全网格覆盖的加载效果：

<div class="grid-wrapper" style="position: relative;">
  <!-- 自定义加载遮罩 -->
  <div 
    class="loading-mask" 
    *ngIf="isCustomLoadingVisible"
    style="position: absolute;top:0;left:0;right:0;bottom:0;background: rgba(255,255,255,0.7);display: flex;align-items: center;justify-content: center;z-index: 10;"
  >
    数据加载中，请稍候...
  </div>
  <!-- AG Grid 组件 -->
  <ag-grid-angular
    [gridOptions]="gridOptions"
    [columnDefs]="columnDefs"
    style="width: 100%; height: 600px;"
    class="ag-theme-alpine"
  ></ag-grid-angular>
</div>

注意：手动调用refreshServerSide()、purgeServerSideCache()等服务端行模型触发数据加载的函数时，不需要额外修改逻辑，上述配置会自动捕获所有getRows触发的请求，统一控制遮罩状态。

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