如何扩展Angular Material Table列定义以避免代码重复？

问题背景 #

我们有个自定义Mat Table，支持排序、筛选、值管道、拖拽、行内编辑等功能，已经实现了树形结构展示，但展开/折叠按钮的定义有问题：单独把按钮设为一列的话，只有按钮会缩进，列内数据还是对齐的，没法展示正确的树形缩进效果。所以想把节点按钮加到第一可见列，让整列内容随节点缩进，从第二列开始数据重新对齐。

但列的元数据来源复杂：有复选框选择列、数据列、按钮列、行内编辑专用按钮列，而且复选框可禁用，数据列和按钮列可隐藏，任意列都可能变成第一列。这导致我们不得不把按钮逻辑复制到每个columnDef里，就算封装成模板，也得重复写模板显示逻辑和表头缩进逻辑，代码冗余得离谱。

无重复代码的解决方案 #

核心思路是用Angular的ngTemplateOutlet和自定义逻辑动态包裹第一可见列，完全不用修改原有列定义，就能实现你伪代码里的“扩展列”效果。

1. 动态识别第一可见列 #

在组件类里写个计算属性，找出当前真正显示的第一列：

// 组件类代码
get firstVisibleColumn(): string | undefined {
  return this.displayedColumns.find(col => {
    // 这里根据你的实际列控制逻辑调整：排除隐藏列、禁用的复选框列等
    const columnDef = this.columnDefinitions.find(def => def.name === col);
    return columnDef?.visible !== false && !(col === 'checkbox' && this.disableCheckbox);
  });
}

2. 重写表格模板，动态包裹第一列 #

不用直接遍历所有列渲染，而是对第一可见列做特殊处理，其他列正常渲染就行：

<!-- 表头部分 -->
<mat-header-row *matHeaderRowDef="displayedColumns">
  @for (col of displayedColumns; track col) {
    @if (col === firstVisibleColumn) {
      <mat-header-cell *matHeaderCellDef>
        <!-- 表头的缩进占位，和单元格按钮宽度对齐 -->
        <div class="tree-header-indent"></div>
        <!-- 复用原有表头模板 -->
        <ng-container [ngTemplateOutlet]="getColumnTemplate(col, 'header')"></ng-container>
      </mat-header-cell>
    } @else {
      <mat-header-cell *matHeaderCellDef>
        <ng-container [ngTemplateOutlet]="getColumnTemplate(col, 'header')"></ng-container>
      </mat-header-cell>
    }
  }
</mat-header-row>

<!-- 行数据部分 -->
<mat-row *matRowDef="let row; columns: displayedColumns;">
  @for (col of displayedColumns; track col) {
    @if (col === firstVisibleColumn) {
      <mat-cell *matCellDef="let element">
        <!-- 树形缩进 + 展开/折叠按钮 -->
        <div class="tree-cell-indent" [style.padding-left.px]="element.level * 20">
          @if (element.hasChildren) {
            <button mat-icon-button (click)="toggleExpand(element)">
              <mat-icon>{{element.expanded ? 'expand_more' : 'chevron_right'}}</mat-icon>
            </button>
          } @else {
            <!-- 空占位，保证没有子节点的行也和有子节点的对齐 -->
            <span style="width: 24px; display: inline-block;"></span>
          }
        </div>
        <!-- 复用原有单元格模板 -->
        <ng-container [ngTemplateOutlet]="getColumnTemplate(col, 'cell')" [ngTemplateOutletContext]="{$implicit: element}"></ng-container>
      </mat-cell>
    } @else {
      <mat-cell *matCellDef="let element">
        <ng-container [ngTemplateOutlet]="getColumnTemplate(col, 'cell')" [ngTemplateOutletContext]="{$implicit: element}"></ng-container>
      </mat-cell>
    }
  }
</mat-row>

<!-- 辅助模板：根据列名和类型（表头/单元格）获取对应模板 -->
<ng-template #getColumnTemplate let-col let-type="type">
  @switch (col) {
    @case ('checkbox') {
      <ng-container [ngTemplateOutlet]="checkboxTemplate" [ngTemplateOutletContext]="{$implicit: type === 'cell' ? $implicit : null}"></ng-container>
    }
    @case ('editbuttons') {
      <ng-container [ngTemplateOutlet]="editButtonsTemplate" [ngTemplateOutletContext]="{$implicit: type === 'cell' ? $implicit : null}"></ng-container>
    }
    @default {
      <!-- 处理数据列和按钮列 -->
      @if (type === 'header') {
        @for (dataCol of dataColumns; track dataCol.name) {
          @if (dataCol.name === col) {
            <ng-container [ngTemplateOutlet]="dataCol.headerTemplate"></ng-container>
          }
        }
        @for (btnCol of buttonColumns; track btnCol.name) {
          @if (btnCol.name === col) {
            <ng-container [ngTemplateOutlet]="btnCol.headerTemplate"></ng-container>
          }
        }
      } @else {
        @for (dataCol of dataColumns; track dataCol.name) {
          @if (dataCol.name === col) {
            <ng-container [ngTemplateOutlet]="dataCol.cellTemplate" [ngTemplateOutletContext]="{$implicit: $implicit}"></ng-container>
          }
        }
        @for (btnCol of buttonColumns; track btnCol.name) {
          @if (btnCol.name === col) {
            <ng-container [ngTemplateOutlet]="btnCol.cellTemplate" [ngTemplateOutletContext]="{$implicit: $implicit}"></ng-container>
          }
        }
      }
    }
  }
</ng-template>

<!-- 原有列模板完全保留，不用改 -->
<ng-template #checkboxTemplate let-element>
  @if (element) {
    <mat-checkbox [(ngModel)]="element.selected"></mat-checkbox>
  } @else {
    <mat-checkbox [(ngModel)]="selectAll"></mat-checkbox>
  }
</ng-template>

@for (dataCol of dataColumns; track dataCol.name) {
  <ng-template #{{dataCol.headerTemplateName}}>
    <!-- 你的原有数据列表头内容 -->
    {{dataCol.label}}
    <mat-icon>arrow_upward</mat-icon>
  </ng-template>
  <ng-template #{{dataCol.cellTemplateName}} let-element>
    <!-- 你的原有数据列单元格内容 -->
    {{element[dataCol.field] | dataPipe}}
  </ng-template>
}

@for (btnCol of buttonColumns; track btnCol.name) {
  <ng-template #{{btnCol.headerTemplateName}}>
    <!-- 你的原有按钮列表头内容 -->
    {{btnCol.label}}
  </ng-template>
  <ng-template #{{btnCol.cellTemplateName}} let-element>
    <!-- 你的原有按钮列单元格内容 -->
    <button mat-button (click)="btnCol.action(element)">{{btnCol.text}}</button>
  </ng-template>
}

<ng-template #editButtonsTemplate let-element>
  <!-- 你的原有编辑按钮列内容 -->
  <button mat-icon-button (click)="editRow(element)"><mat-icon>edit</mat-icon></button>
  <button mat-icon-button (click)="deleteRow(element)"><mat-icon>delete</mat-icon></button>
</ng-template>

3. 加个简单样式对齐 #

.tree-header-indent {
  display: inline-block;
  width: 24px; /* 和按钮宽度保持一致，保证表头对齐 */
}

.tree-cell-indent {
  display: inline-block;
  margin-right: 8px;
}

方案优势 #

• 完全复用原有列模板，不用修改一行旧代码
• 自动适配任何第一可见列，不管是复选框、数据列还是按钮列
• 缩进和按钮逻辑只写一次，彻底告别代码重复
• 表头和单元格的缩进对齐完美统一

进阶玩法：封装成指令 #

如果多个组件都需要这个功能，可以把上面的逻辑封装成TreeColumnExtender指令，通过@Input()指定目标列名，动态插入缩进和按钮元素，复用性更强。

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