Angular中子组件如何监听父组件表格行菜单按钮点击并获取行数据？

咱们通过以下几步实现子组件监听表格行操作点击并获取行数据的需求：

1. 改造表格基组件（app-data-table） #

1.1 给组件添加操作输出事件 #

在基组件的TS文件里，定义一个@Output事件，用来把点击的操作和对应行的数据传递给子组件：

import { Component, Input, Output, EventEmitter } from '@angular/core';

// 先明确MenuItemDefinition类型（如果还没定义的话）
export interface MenuItemDefinition {
  icon: string;
  label: string;
}

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
})
export class DataTableComponent {
  @Input() rowActionIcon?: string;
  @Input() menuActions: MenuItemDefinition[] = [];
  // 其他已有的输入属性（比如tableDataSource、tableColumns等）...

  // 定义输出事件，传递操作和行数据
  @Output() rowActionClicked = new EventEmitter<{ action: MenuItemDefinition; rowData: any }>();

  // 触发事件的方法
  onMenuItemClick(action: MenuItemDefinition, rowData: any) {
    this.rowActionClicked.emit({ action, rowData });
  }
}

1.2 修改模板绑定菜单项点击事件 #

把基组件模板里的菜单项点击事件绑定到上面定义的方法，传递当前操作和行数据：

<table mat-table [dataSource]="tableDataSource" matSort (matSortChange)="sortTable($event)" class="mat-elevation-z8">
  ...
  <!-- action column -->
  <ng-container *ngIf="rowActionIcon?.length" [matColumnDef]="rowActionIcon">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell class="action-column" *matCellDef="let element">
      <button mat-button [matMenuTriggerFor]="menu">
        <mat-icon>{{rowActionIcon}}</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <!-- 给每个菜单项添加点击事件，传递操作和当前行数据 -->
        <button mat-menu-item 
                *ngFor="let action of menuActions"
                (click)="onMenuItemClick(action, element)">
          <mat-icon>{{action.icon}}</mat-icon>{{action.label}}
        </button>
      </mat-menu>
    </td>
  </ng-container>
</table>

2. 在子组件（CustomersComponent）中监听操作 #

2.1 模板绑定输出事件 #

在子组件的模板里，给app-data-table添加事件绑定：

<app-data-table 
  [isFilterable]="true"
  [isPageable]="true"
  [tableColumns]="customerColumns"
  [tableData]="customers"
  [rowActionIcon]="'more_vert'"
  [menuActions]="menuActions"
  <!-- 绑定基组件的输出事件到子组件的处理方法 -->
  (rowActionClicked)="handleRowAction($event)"
></app-data-table>

2.2 实现事件处理逻辑 #

在子组件的TS文件里，写handleRowAction方法，根据不同的操作类型处理（比如打开编辑对话框、执行删除）：

export class CustomersComponent {
  customers: Customer[];
  selectedCustomer: Customer | null;
  menuActions: MenuItemDefinition[];
  customerColumns: { name: string; dataKey: string; isSortable: boolean }[];
  
  constructor(private cust_api: CustomerApiService, public dialog: MatDialog) {
    // 原有初始化代码...
  }

  handleRowAction(event: { action: MenuItemDefinition; rowData: Customer }) {
    const { action, rowData } = event;
    this.selectedCustomer = rowData;

    // 根据操作标签判断逻辑
    if (action.label === 'Edit') {
      // 打开编辑对话框，把行数据传进去
      this.dialog.open(EditCustomerDialogComponent, {
        data: rowData
      });
    } else if (action.label === 'Delete') {
      // 删除前确认，然后调用API更新列表
      if (confirm(`确定要删除客户 ${rowData.name} 吗？`)) {
        this.cust_api.deleteCustomer(rowData.id).subscribe(() => {
          this.customers = this.customers.filter(c => c.id !== rowData.id);
        });
      }
    }
  }
}

3. （可选）编辑对话框示例 #

如果需要编辑对话框，创建一个简单的组件接收数据：

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Customer } from '../models/customer.model';

@Component({
  selector: 'app-edit-customer-dialog',
  templateUrl: './edit-customer-dialog.component.html'
})
export class EditCustomerDialogComponent {
  // 注入对话框传入的数据
  constructor(@Inject(MAT_DIALOG_DATA) public data: Customer) { }
}

对话框模板可以写表单来编辑客户信息，这里就不展开了。

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