如何区分通过ContentChildren传递给组件的多个模板？

这个问题其实在Angular开发中很常见，尤其是封装通用组件的时候，我常用两种方法来解决，下面结合你提到的datatable场景详细说下：

方法一：模板引用变量 + @ContentChildren #

这种方法适合列数固定、不需要动态扩展的场景，核心是给每个自定义模板加一个唯一的模板引用变量，然后在组件里通过@ContentChildren获取对应模板。

父组件使用示例 #

<datatable [rows]="userData">
  <!-- 给姓名列模板加引用变量#nameCol -->
  <ng-template #nameCol let-row>
    <span class="text-bold">{{row.name}}</span>
  </ng-template>
  <!-- 给年龄列模板加引用变量#ageCol -->
  <ng-template #ageCol let-row>
    {{row.age}} 岁
  </ng-template>
</datatable>

Datatable组件实现 #

import { Component, Input, ContentChildren, QueryList, TemplateRef } from '@angular/core';

@Component({
  selector: 'datatable',
  template: `
    <table class="datatable">
      <tbody>
        <tr *ngFor="let row of rows">
          <!-- 渲染姓名列模板 -->
          <td *ngTemplateOutlet="nameTemplate; context: {$implicit: row}"></td>
          <!-- 渲染年龄列模板 -->
          <td *ngTemplateOutlet="ageTemplate; context: {$implicit: row}"></td>
          <!-- 其他固定列可以直接显示 -->
          <td>{{row.email}}</td>
        </tr>
      </tbody>
    </table>
  `
})
export class DatatableComponent {
  @Input() rows: any[] = [];
  
  // 通过引用变量获取模板（QueryList是集合，取第一个元素即可）
  @ContentChildren('nameCol') private nameColRef!: QueryList<TemplateRef<any>>;
  @ContentChildren('ageCol') private ageColRef!: QueryList<TemplateRef<any>>;

  get nameTemplate() {
    return this.nameColRef.first;
  }

  get ageTemplate() {
    return this.ageColRef.first;
  }
}

这种方法简单直接，但缺点也很明显——如果要新增列，必须修改组件代码添加新的@ContentChildren声明，扩展性较差。

方法二：自定义指令标记模板（推荐） #

这是更灵活的方案，适合需要动态扩展列的场景。我们可以创建一个自定义指令，给每个模板标记唯一的列标识，然后在组件里通过@ContentChildren收集所有指令实例，再根据标识匹配对应的模板。

第一步：创建自定义列模板指令 #

import { Directive, Input, TemplateRef } from '@angular/core';

@Directive({
  selector: '[columnTemplate]'
})
export class ColumnTemplateDirective {
  // 接收列的唯一标识，比如列字段名
  @Input('columnTemplate') columnKey!: string;
  // 暴露模板实例给父组件使用
  constructor(public template: TemplateRef<any>) {}
}

第二步：父组件中使用指令 #

<datatable [rows]="userData" [columns]="['name', 'age', 'email']">
  <!-- 给姓名列绑定标识"name" -->
  <ng-template columnTemplate="name" let-row>
    <span class="text-bold">{{row.name}}</span>
  </ng-template>
  <!-- 给年龄列绑定标识"age" -->
  <ng-template columnTemplate="age" let-row>
    {{row.age}} 岁
  </ng-template>
  <!-- email列不提供自定义模板，将使用默认渲染逻辑 -->
</datatable>

第三步：Datatable组件实现 #

import { Component, Input, ContentChildren, QueryList, TemplateRef, OnInit } from '@angular/core';
import { ColumnTemplateDirective } from './column-template.directive';

@Component({
  selector: 'datatable',
  template: `
    <table class="datatable">
      <tbody>
        <tr *ngFor="let row of rows">
          <td *ngFor="let colKey of columns">
            <!-- 优先使用自定义模板，没有则用默认模板 -->
            <ng-container *ngIf="getTemplate(colKey); else defaultCol">
              <ng-container *ngTemplateOutlet="getTemplate(colKey)!; context: {$implicit: row}"></ng-container>
            </ng-container>
            <ng-template #defaultCol>{{row[colKey]}}</ng-template>
          </td>
        </tr>
      </tbody>
    </table>
  `
})
export class DatatableComponent implements OnInit {
  @Input() rows: any[] = [];
  @Input() columns: string[] = [];
  
  // 收集所有列模板指令实例
  @ContentChildren(ColumnTemplateDirective) private columnTemplates!: QueryList<ColumnTemplateDirective>;
  
  // 建立列标识到模板的映射表
  private templateMap = new Map<string, TemplateRef<any>>();

  ngOnInit() {
    // 初始化映射表，监听模板变化更新映射
    this.updateTemplateMap();
    this.columnTemplates.changes.subscribe(() => this.updateTemplateMap());
  }

  private updateTemplateMap() {
    this.templateMap.clear();
    this.columnTemplates.forEach(dir => {
      this.templateMap.set(dir.columnKey, dir.template);
    });
  }

  // 根据列标识获取对应模板
  getTemplate(colKey: string): TemplateRef<any> | undefined {
    return this.templateMap.get(colKey);
  }
}

这种方案的优势在于：不管新增多少列，都不需要修改Datatable组件的代码，只需要在父组件中添加对应标识的模板即可，完全符合组件的开闭原则，扩展性拉满。

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