能否将Angular Material表格指令拆分至独立文件？

你可以通过自定义组件封装matColumnDef逻辑来简化表格代码。直接用普通组件失效的原因是：mat-table需要直接感知到MatColumnDef指令实例，而普通组件的模板会被封装在宿主元素内，表格无法识别内部的指令。以下是可行的实现方案：

实现步骤 #

1. 创建自定义列组件 #

继承MatColumnDef并将自身注册为该指令的提供者，让mat-table能识别到列定义：

import { Component, Input } from '@angular/core';
import { MatColumnDef } from '@angular/material/table';

@Component({
  selector: 'id-column-def',
  template: `
    <th mat-header-cell *matHeaderCellDef>Id</th>
    <td mat-cell *matCellDef="let element">{{ element.id }}</td>
  `,
  // 关键：将组件自身作为MatColumnDef实例提供
  providers: [{ provide: MatColumnDef, useExisting: IdColumnDefComponent }]
})
export class IdColumnDefComponent extends MatColumnDef {
  // 列名，对应displayedColumns中的值
  @Input() override name = 'id';
}

2. 在表格中使用自定义列组件 #

用<ng-container>包裹自定义组件（确保列定义能被表格正确识别）：

<table mat-table [dataSource]="dataSource">
  <!-- 使用自定义列组件 -->
  <ng-container id-column-def></ng-container>
  <ng-container name-column-def></ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

3. 动态配置通用列组件 #

如果需要复用不同字段的列，可以通过@Input()传递配置参数，打造通用列组件：

import { Component, Input } from '@angular/core';
import { MatColumnDef } from '@angular/material/table';

@Component({
  selector: 'generic-column-def',
  template: `
    <th mat-header-cell *matHeaderCellDef>{{ headerTitle }}</th>
    <td mat-cell *matCellDef="let element">{{ element[dataField] }}</td>
  `,
  providers: [{ provide: MatColumnDef, useExisting: GenericColumnDefComponent }]
})
export class GenericColumnDefComponent extends MatColumnDef {
  @Input() override name!: string;
  @Input() headerTitle!: string;
  @Input() dataField!: string;
}

使用时传入参数：

<ng-container 
  generic-column-def 
  name="email" 
  headerTitle="邮箱" 
  dataField="email"
></ng-container>

核心原理 #

mat-table通过依赖注入查询所有子级的MatColumnDef实例，自定义组件继承MatColumnDef并注册提供者后，会被表格识别为合法的列定义，组件内的表头和数据单元格也会自动关联到该列。

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