如何在 Angular 17 中重用 Angular 材质表？

Question

我创建了一个子组件并使用 Angular Material。我正在显示传递给父组件的动态数据。我无法操作图标和名称，以便我可以从子组件传递父组件中的事件，该项目也独立使用

这是我正在尝试的代码

父组件：

ngOnInit() {
    this.columns = [
      {
        title: "Country",
        name: "countryName"
      },      
      {
        title: "State",
        name: "state"
      },      
      {
        title: "City",
        name: "cityName"
      },     
      {
        title: "Created By",
        name: "createdBy"
      },
      {
        title: "Created Date",
        name: "createdAt"
      },
      {
        title: "Action",
        name: 'actions',
        buttons: [
          {
            type: "",
            icon: "edit",
            class: "tbl-fav-edit",
            title: ActionButtonType.Edit,
            click: this.btnEditClick,
          },
          {
            type: "",
            icon: "trash-2",
            class: "tbl-fav-delete",
            title: ActionButtonType.Delete,
            click: 'this.btnDeleteClick',
          }
        ]
      }
    ]
    this.getAllCity();
  }

 @if (flg) {
      <app-dynamic-mat-table  [workList]="workList" [columns]="columns"></app-dynamic-mat-table>
                      }

子组件：

import { Component, Input,  OnInit,ViewChild } from '@angular/core';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatIconModule } from '@angular/material/icon';
import { DatePipe } from '@angular/common';
import { FeatherIconsComponent } from '../feather-icons/feather-icons.component';
@Component({
  selector: 'app-dynamic-mat-table',
  standalone: true,
  imports: [MatTableModule,MatPaginatorModule,MatPaginator,MatIconModule,DatePipe,FeatherIconsComponent, DatePipe,],
  templateUrl: './dynamic-mat-table.component.html',
  styleUrl: './dynamic-mat-table.component.scss'
})

export class DynamicMatTableComponent implements OnInit{  
  hide = true; 
  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
  @Input() workList:any=[];
  @Input() columns:any=[];
  dataSource:any;  
  displayedColumns=[];  
  displayedColumnss=[];  

  constructor(){
  }

  ngOnInit(): void {
    console.log(this.columns);
    this.dataSource = new MatTableDataSource<any>(this.workList);
    this.displayedColumns = this.columns.map((column: any) => column.name);   
    this.displayedColumnss = this.columns.map((column: any) => column);   
    this.dataSource.paginator = this.paginator;
    console.log(this.displayedColumns);
    console.log(this.displayedColumnss);
  }

  getColumnTitle(columnName: []) {    
    console.log(columnName);
    console.log(this.columns);
    
    const columnTitle = this.columns.find((column: any) => column.name === columnName);
    return columnTitle ? columnTitle.title : '';
}
  <div class="responsive_table">
                    <table mat-table [dataSource]="dataSource" matSort class="mat-cell advance-table">
                        @for (column of displayedColumns; track column) {                           
                                <ng-container [matColumnDef]="column">
                                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ getColumnTitle(column) }} </th>
                                    <td mat-cell *matCellDef="let element"> 
                                        @if(column==='createdAt'){
                                            {{ element[column] | date: 'dd-MM-yyyy' }} 
                                          }@else{
                                            {{ element[column] }} 
                                          }
                                        @if(column==='actions'){
                                            {{element[column]}}
                                           @for(actionButton of element.buttons; track actionButton){
                                            <span>{{actionButton}}sww</span>
                                           }                                           
                                        <td><app-feather-icons [icon]="'edit'" [class]="'tbl-fav-edit'" ></app-feather-icons></td>
                                        <td> <app-feather-icons [icon]="'trash-2'" [class]="'tbl-fav-delete'"></app-feather-icons></td>
                                          }
                                    </td>                                  
                                </ng-container>                               
                        }                       
                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                    </table>                   
                    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
                  </div>

这里编辑和删除图标显示静态，但我需要显示这个图标来自父组件，以便我们可以动态使用，当我们单击编辑图标时也需要在父组件中打印记录

Answer 1

您需要将父组件的点击事件处理程序传递给子组件！然后，子组件可以使用这些处理程序来触发父组件中的操作... -> 在父组件中，为操作按钮（btnEditClick 和 btnDeleteClick）定义单击事件处理程序。 -> 将这些事件处理程序作为列输入的一部分传递给子组件， -> 在子组件中，修改模板以使用操作按钮传递的事件处理程序。 ->当子组件中的操作按钮被点击时，触发从父组件传递的相应事件处理程序！ \修改后的代码\

#父组件

export class ParentComponent {
  // Define click event handlers
  btnEditClick(item: any) {
    console.log('Edit clicked:', item);
  }

  btnDeleteClick(item: any) {
    console.log('Delete clicked:', item);
  }

  // Your existing code for column definition
}

------------------------------------------------- ------------| #子组件模板

<!-- Inside the table -->
<td mat-cell *matCellDef="let element">
  <span *ngIf="column.name !== 'actions'">{{ element[column.name] }}</span>
  <span *ngIf="column.name === 'actions'">
    <button mat-icon-button (click)="column.click(element)">
      <mat-icon>{{ column.icon }}</mat-icon>
    </button>
  </span>
</td>

------------------------------------------------- ------------| 通过此设置，当在子组件中单击操作按钮时...它们会触发从父组件传递的相应事件处理程序（btnEditClick 或 btnDeleteClick）。 --->您还需要更新父组件中的列定义以包含 click 属性 <--- :

this.columns = [
  // Other column definitions...
  {
    title: "Action",
    name: 'actions',
    buttons: [
      {
        type: "",
        icon: "edit",
        class: "tbl-fav-edit",
        title: ActionButtonType.Edit,
        click: this.btnEditClick.bind(this), // Bind the event handler
      },
      {
        type: "",
        icon: "trash-2",
        class: "tbl-fav-delete",
        title: ActionButtonType.Delete,
        click: this.btnDeleteClick.bind(this), // Bind the event handler
      }
    ]
  }
];

------------------------------------------------- ------------| !{确保使用...bind(this) 将事件处理程序（btnEditClick 和 btnDeleteClick）绑定到父组件实例，以便它们在传递给子组件时保持正确的上下文}！ 不客气<3