我如何监听来自 Angular 父组件的特定按钮按下？答案

【问题标题】：How can I listen for specific button presses from a parent component in Angular?我如何监听来自 Angular 父组件的特定按钮按下？
【发布时间】：2022-11-17 22:19:21
【问题描述】：

我有一个表，旨在充当可配置的基类。在那个类中，我希望能够传递一个菜单，其中包含每一行的操作：

 <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" [id]="rowActionIcon" (click)="emitRowAction(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"><mat-icon>{{action.icon}}</mat-icon>{{action.label}}</button>
                </mat-menu>
            </td>
        </ng-container>
</mat-table>

操作列显示一个带有下拉菜单项的按钮：

我如何在使用此组件的子组件中获得这些点击以及该行的数据？理想情况下，我想以某种方式在对话框中显示该数据。

子组件定义了应该存在于父表上的 menuActions：

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) {
    this.customers = [];
    this.selectedCustomer = null;
    this.menuActions = [
      { icon: 'border_color', label: 'Edit' },
      { icon: 'delete', label: 'Delete' },
    ];
    this.customerColumns = [
      {
        name: 'Region',
        dataKey: 'region',
        isSortable: true,
      },
      { name: 'Name', dataKey: 'name', isSortable: true },
      { name: 'Id', dataKey: 'id', isSortable: true },
    ];
  }

在模板中：

  <app-data-table 
        [isFilterable]="true"
        [isPageable]="true"
        [tableColumns]="customerColumns"
        [tableData]="customers"
        [rowActionIcon]="'more_vert'"
        [menuActions]="this.menuActions"
        >
    </app-data-table>

但是我完全不知道我应该如何将数据和操作动态映射到我在父模板中创建的每个按钮。

【问题讨论】：

标签： angular

【解决方案1】：

如果我没记错，那么您已经实现了父/子组件，其中父组件将数据提供给子组件以供显示。

因此，当使用子组件执行操作时，需要为值传递输出参数，如下所示：

父组件

HTML

<app-data-table 
        [isFilterable]="true"
        [isPageable]="true"
        [tableColumns]="customerColumns"
        [tableData]="customers"
        [rowActionIcon]="'more_vert'"
        [menuActions]="this.menuActions"
        (onAction)="onParentAction($event)"
        >
    </app-data-table>

onParentAction(res:any){
  //@ts-ignore
  if(res.action=="EDIT"){
   your action here ......
  }else if(res.action == "DELETE"){
   your action here ....
  }
}

子组件

  @Output() onAction = new EventEmitter<any>();

  onClickEdit(id: number) {
    this.onAction.emit({"action":"EDIT","id":id});
  }
  onClickDelete(id: number) {
    this.onAction.emit({"action":"DELETE","id":id});
  }

说明：当用户在子组件中执行任何操作时，例如编辑然后他们需要用值调用名为onClickEdit的函数 id 所以使用输出参数值的emit方法回到父组件和父组件获取带有两对对象的对象{ action: "EDIT or DELETE" & id value }

【讨论】：