如何将Material行模板传入自定义Angular Material表格组件

问题原因 #

你之前的写法不生效是因为MatRowDef是Angular Material Table的专用结构指令，它需要和MatTable实例完成上下文绑定、注册逻辑才能正常工作，直接通过ngTemplateOutlet渲染它的内部模板，只会输出无表格上下文绑定的无效HTML，无法和你的自定义表格数据源、列配置联动。

正确实现步骤 #

1. 组件类调整

首先把@ContentChildren改为@ContentChild（单个行定义不需要查询列表），同时注入变更检测器用来处理动态赋值后的变更检测：

import { Component, ContentChild, ChangeDetectorRef, AfterContentInit } from '@angular/core';
import { MatRowDef } from '@angular/material/table';

@Component({
  // 你的原有组件配置
})
export class MyTableComponent implements AfterContentInit {
  // 你的其他现有配置，比如displayedColumns、dataSource等
  displayedColumns: string[] = [];

  // 查询用户传入的自定义行定义
  @ContentChild(MatRowDef) customRowDef?: MatRowDef<any>;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterContentInit(): void {
    // 如果用户传入的行定义没有指定columns，自动赋值为组件内部的列配置
    if (this.customRowDef && !this.customRowDef.columns) {
      this.customRowDef.columns = this.displayedColumns;
      this.cdr.detectChanges();
    }
  }
}

2. 模板调整

使用Angular Material内置的matRowDefOutlet指令来加载行定义，不要直接用ngTemplateOutlet：

<!-- 你的表格其他结构，比如mat-table、表头定义等 -->
<table mat-table [dataSource]="dataSource">
  <!-- 你的列定义、表头定义代码 -->
  ...

  <!-- 优先加载用户传入的自定义行定义，没有则加载默认行定义 -->
  <ng-template [matRowDefOutlet]="customRowDef || defaultRowDef"></ng-template>

  <!-- 内部默认行定义 -->
  <ng-template #defaultRowDef matRowDef="let row; columns: displayedColumns;">
    <tr mat-row></tr>
  </ng-template>
</table>

调整后你期望的用法即可正常生效。

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