Angular中ngTemplateOutlet无法渲染传入变量模板的问题

核心问题分析 #

你当前的实现中，用ViewChild手动获取ng-template并存入列数组的方式，会因为Angular视图初始化顺序的问题，导致模板引用在渲染时还未完成初始化，最终<td>内容为空。

正确实现步骤 #

1. 定义列结构接口 #

在组件类中定义包含模板引用的列接口，明确每列的表头、字段和模板：

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

export interface TableColumn {
  header: string;
  field: string;
  template?: TemplateRef<any>;
}

2. 用@ContentChildren自动收集列模板 #

不要手动用ViewChild收集，而是通过内容投影+@ContentChildren自动获取所有列模板，确保时机正确：

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit, AfterContentInit {
  columns: TableColumn[] = [
    { header: 'ID', field: 'id' },
    { header: '名称', field: 'name' },
    { header: '操作', field: 'action' }
  ];

  data = [
    { id: 1, name: '测试数据1' },
    { id: 2, name: '测试数据2' }
  ];

  // 收集所有带有#colTemplate标记的ng-template
  @ContentChildren('colTemplate') columnTemplates!: QueryList<TemplateRef<any>>;

  ngAfterContentInit() {
    // 将收集到的模板和列定义关联（按顺序匹配，也可通过模板上下文字段精准匹配）
    this.columnTemplates.forEach((template, index) => {
      if (this.columns[index]) {
        this.columns[index].template = template;
      }
    });
  }
}

3. 模板中关联列模板并渲染 #

在HTML模板中，先定义列的ng-template，然后在表格中通过ngTemplateOutlet渲染，同时传递行数据上下文：

<!-- 定义列模板 -->
<ng-template #colTemplate let-item>
  <span>{{item.id}}</span>
</ng-template>
<ng-template #colTemplate let-item>
  <strong>{{item.name}}</strong>
</ng-template>
<ng-template #colTemplate let-item>
  <button (click)="handleEdit(item)">编辑</button>
  <button (click)="handleDelete(item)">删除</button>
</ng-template>

<!-- 动态表格 -->
<table border="1">
  <thead>
    <tr>
      <th *ngFor="let col of columns">{{col.header}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of data">
      <td *ngFor="let col of columns">
        <ng-container *ngIf="col.template; else defaultContent">
          <ng-template [ngTemplateOutlet]="col.template" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
        </ng-container>
        <ng-template #defaultContent>{{item[col.field]}}</ng-template>
      </td>
    </tr>
  </tbody>
</table>

4. 关键细节说明 #

• ngAfterContentInit是Angular内容投影完成后的回调，此时@ContentChildren已收集到所有模板，确保模板引用有效。
• ngTemplateOutletContext用来给模板传递数据，$implicit对应模板中的let-item变量，可直接在模板中使用行数据。
• 加入defaultContent模板，当列没有自定义模板时，默认渲染字段值，提升组件灵活性。

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