如何在AG Grid Angular单个单元格内实现多按钮及不同操作？

要在AG Grid的单个单元格里放置多个带不同操作的按钮，核心是通过自定义单元格渲染组件封装按钮组，以下是具体实现步骤：

1. 创建自定义单元格渲染组件 #

首先生成一个组件承载操作按钮：

ng generate component cell-action-buttons

组件模板（cell-action-buttons.component.html） #

添加所需按钮并绑定点击事件：

<div class="action-buttons">
  <button mat-button (click)="handleEdit()">编辑</button>
  <button mat-button color="warn" (click)="handleDelete()">删除</button>
  <button mat-button color="primary" (click)="handleView()">查看</button>
</div>

给按钮组加间距样式（cell-action-buttons.component.css）：

.action-buttons button {
  margin-right: 8px;
}

组件类（cell-action-buttons.component.ts） #

实现AG Grid的ICellRendererAngularComp接口，接收行数据并触发父组件的操作逻辑：

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';

@Component({
  selector: 'app-cell-action-buttons',
  templateUrl: './cell-action-buttons.component.html',
  styleUrls: ['./cell-action-buttons.component.css']
})
export class CellActionButtonsComponent implements ICellRendererAngularComp {
  private params!: ICellRendererParams;
  public rowData: any;

  // 初始化接收AG Grid传递的参数
  agInit(params: ICellRendererParams): void {
    this.params = params;
    this.rowData = params.data;
  }

  // 行数据更新时刷新组件
  refresh(params: ICellRendererParams): boolean {
    this.rowData = params.data;
    return true;
  }

  handleEdit(): void {
    this.params.context.parentComponent.editRow(this.rowData);
  }

  handleDelete(): void {
    this.params.context.parentComponent.deleteRow(this.rowData);
  }

  handleView(): void {
    this.params.context.parentComponent.viewRow(this.rowData);
  }
}

2. 在父组件中配置AG Grid #

父组件类（app.component.ts） #

在列定义中指定自定义渲染组件，通过context传递父组件实例，让子组件能调用父组件的操作方法：

import { Component } from '@angular/core';
import { CellActionButtonsComponent } from './cell-action-buttons/cell-action-buttons.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  columnDefs = [
    { headerName: '姓名', field: 'name' },
    { headerName: '年龄', field: 'age' },
    { 
      headerName: '操作', 
      cellRenderer: CellActionButtonsComponent,
      cellRendererParams: {
        context: { parentComponent: this } // 传递父组件实例
      },
      width: 280 // 预留足够宽度容纳按钮
    }
  ];

  rowData = [
    { name: '张三', age: 25 },
    { name: '李四', age: 30 },
    { name: '王五', age: 28 }
  ];

  editRow(row: any): void {
    console.log('开始编辑:', row);
    // 这里添加你的编辑业务代码
  }

  deleteRow(row: any): void {
    console.log('确认删除:', row);
    // 这里添加你的删除业务代码
  }

  viewRow(row: any): void {
    console.log('查看详情:', row);
    // 这里添加你的查看业务代码
  }
}

父组件模板（app.component.html） #

添加AG Grid基础标签：

<ag-grid-angular
  style="width: 100%; height: 500px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
>
</ag-grid-angular>

3. 可选优化 #

• 根据行数据控制按钮状态：比如禁用特定行的编辑按钮

  <button mat-button (click)="handleEdit()" [disabled]="rowData.age < 18">编辑</button>
  

• 动态显示按钮：比如仅当行数据满足条件时显示删除按钮

  <button mat-button color="warn" (click)="handleDelete()" *ngIf="rowData.canDelete">删除</button>
  

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