如何在ag-grid-angular中将‘no rows to show’替换为动态组件？

步骤1：创建自定义无数据覆盖层组件 #

新建Angular组件，实现ag-grid提供的INoRowsOverlayAngularComp接口，通过agInit方法接收动态参数：

// no-rows-overlay.component.ts
import { Component } from '@angular/core';
import { INoRowsOverlayAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-no-rows-overlay',
  template: `
    <div class="flex flex-col items-center">
      <img src="assets/images/folder-plus.svg" alt="No data" class="w-10 h-10 text-gray-400">
      <p class="font-bold text-xl text-gray-500 py-3">{{ title }}</p>
      <p class="text-base text-gray-400">{{ description }}</p>
    </div>
  `
})
export class NoRowsOverlayComponent implements INoRowsOverlayAngularComp {
  title: string = 'No data found';
  description: string = 'Data does not exist for selected filters.';

  agInit(params: { title?: string; description?: string }): void {
    // 用传入参数覆盖默认值
    if (params.title) this.title = params.title;
    if (params.description) this.description = params.description;
  }
}

步骤2：在模块中注册组件 #

在NgModule中声明该组件，并通过AgGridModule.withComponents告知ag-grid：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-angular';
import { NoRowsOverlayComponent } from './no-rows-overlay.component';
import { YourGridComponent } from './your-grid.component'; // 你的ag-grid宿主组件

@NgModule({
  declarations: [
    YourGridComponent,
    NoRowsOverlayComponent
  ],
  imports: [
    BrowserModule,
    AgGridModule.withComponents([NoRowsOverlayComponent])
  ],
  bootstrap: [YourGridComponent]
})
export class AppModule { }

步骤3：配置ag-grid使用自定义组件 #

在ag-grid宿主组件中，配置gridOptions指定自定义组件并传入动态参数：

// your-grid.component.ts
import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { NoRowsOverlayComponent } from './no-rows-overlay.component';

@Component({
  selector: 'app-your-grid',
  template: `<ag-grid-angular [gridOptions]="gridOptions" [rowData]="rowData"></ag-grid-angular>`
})
export class YourGridComponent {
  rowData: any[] = []; // 示例空数据
  gridOptions: GridOptions = {
    // ...其他ag-grid配置
    frameworkComponents: {
      customNoRowsOverlay: NoRowsOverlayComponent
    },
    overlayNoRowsComponent: 'customNoRowsOverlay',
    // 传入动态标题和描述
    overlayNoRowsComponentParams: {
      title: '暂无数据',
      description: '当前筛选条件下没有匹配的数据，请调整筛选条件后重试。'
    }
  };
}

步骤4：运行时动态更新内容 #

如果需要在运行时（比如筛选条件变化后）更新标题和描述，可通过gridApi修改参数：

// your-grid.component.ts
import { GridApi } from 'ag-grid-community';

export class YourGridComponent {
  private gridApi!: GridApi;

  onGridReady(params: { api: GridApi }): void {
    this.gridApi = params.api;
  }

  updateNoRowsOverlay(title: string, description: string): void {
    this.gridApi?.setGridOption('overlayNoRowsComponentParams', { title, description });
  }
}

同步修改模板绑定gridReady事件：

<ag-grid-angular 
  [gridOptions]="gridOptions" 
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

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