Angular 动态内容绑定：独立渲染每个步骤的描述内容

本文详解如何在 Angular 中实现基于步数的动态内容分发，解决 ng-content 在 *ngFor 内失效的问题，通过自定义结构型指令 + TemplateRef 实现每个步骤精准绑定专属描述文本。

本文详解如何在 angular 中实现基于步数的动态内容分发，解决 `ng-content` 在 `*ngfor` 内失效的问题，通过自定义结构型指令 + `templateref` 实现每个步骤精准绑定专属描述文本。

在 Angular 开发中，当需要根据动态数量（如步骤数）批量渲染组件，并为每个实例绑定唯一的内容片段时，直接使用 <ng-content> 会遇到根本性限制：ng-content 是编译时静态投影机制，无法与 *ngFor 等运行时结构指令协同工作——所有带 stepDescription 的子元素会被统一投影到同一个 <ng-content> 插槽中，导致内容“全部堆叠到最后一个步骤”或随输入变化而丢失。

要实现“第 N 个步骤显示第 N 条描述”的精确映射，必须改用 结构型指令（Structural Directive）+ TemplateRef + QueryList 的组合方案。其核心逻辑是：将每段描述内容封装为可复用的模板，并在父组件中按需实例化对应模板。

✅ 正确实现步骤

1. 创建结构型指令 StepDescriptionDirective

该指令接收步骤序号作为输入，并保存模板引用：

// step-description.directive.tsimport { Directive, Input, TemplateRef } from '@angular/core';@Directive({  selector: '[stepDescription]'})export class StepDescriptionDirective {  @Input() stepDescription!: number; // 注意：使用小驼峰命名以匹配 HTML 属性  constructor(public templateRef: TemplateRef<unknown>) {}}

⚠️ 注意：HTML 中属性名应为 stepDescription（小驼峰），而非 StepDescription，否则绑定失败；Angular 模板中属性名自动转为 kebab-case（即 step-description），但指令 selector 保持小驼峰即可。

2. 在 Executor 组件中使用指令绑定各步骤内容

<!-- executor.component.html --><stage   [numberOfSteps]="6"   [(number)]="currentExecutorStep">  <div *stepDescription="1">内容一：初始化配置</div>  <div *stepDescription="2">内容二：参数校验</div>  <div *stepDescription="3">内容三：服务调用</div>  <div *stepDescription="4">内容四：结果解析</div>  <div *stepDescription="5">内容五：状态更新</div>  <div *stepDescription="6">内容六：完成收尾</div></stage>

3. Stage 组件改造：收集模板并条件渲染

在 StageComponent 中，使用 @ContentChildren 查询所有 StepDescriptionDirective 实例，并在模板中按 step 值匹配渲染：

// stage.component.tsimport { Component, Input, Output, EventEmitter, ContentChildren, QueryList, AfterContentInit } from '@angular/core';import { StepDescriptionDirective } from './step-description.directive';@Component({  selector: 'stage',  templateUrl: './stage.component.html'})export class StageComponent implements AfterContentInit {  @Input() numberOfSteps!: number;  @Input() number!: number;  @Output() numberChange = new EventEmitter<number>();  @ContentChildren(StepDescriptionDirective)   stepDescriptionDirs!: QueryList<StepDescriptionDirective>;  stepDescriptions: StepDescriptionDirective[] = [];  get stepsArray(): number[] {    return Array.from({ length: this.numberOfSteps }, (_, i) => i + 1);  }  ngAfterContentInit(): void {    this.stepDescriptions = this.stepDescriptionDirs.toArray();  }}

<!-- stage.component.html --><div class="step" *ngFor="let step of stepsArray; let i = index;">  <div *ngIf="step > number; else done">    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">      <rect [class.completed]="step <= number" width="36" height="36" rx="18" fill="#F3F3F3"/>      <text class="body-3" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="16" fill="black">{{ step }}</text>    </svg>    <!-- 关键：遍历所有模板，仅渲染 step 匹配的那一个 -->    <ng-container *ngFor="let desc of stepDescriptions">      <ng-container         *ngIf="desc.stepDescription === step"         [ngTemplateOutlet]="desc.templateRef">      </ng-container>    </ng-container>  </div>  <ng-template #done>    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">      <rect x="0.5" y="0.5" width="35" height="35" rx="17.5" stroke="#929292"/>      <path d="M24.7373 10L14.5466 20.3769L11.2415 17.0114L8 20.3122L11.3051 23.6777L14.5678 27L17.8093 23.6992L28 13.3224L24.7373 10Z"            fill="#28B446"/>    </svg>  </ng-template></div>

? 关键要点总结

• ❌ ng-content 不支持条件/循环内部分发，它是单次、全局的 DOM 投影；
• ✅ 结构型指令（如 *stepDescription="2"）本质是 ngTemplateOutlet 的语法糖，天然支持动态实例化；
• ✅ @ContentChildren 在 AfterContentInit 钩子中才能获取完整 QueryList，切勿在 ngOnInit 中访问；
• ✅ 使用 [ngTemplateOutlet] + [ngTemplateOutletContext] 可进一步传递上下文数据（如当前 step 值），实现更复杂模板逻辑；
• ✅ 若需双向绑定 number，请确保 StageComponent 中触发 numberChange.emit(newValue)，并在父组件使用 [(number)] 语法。

此方案完全解耦内容与结构，扩展性强——新增步骤只需在 Executor 中添加一行带 *stepDescription 的模板，无需修改 Stage 逻辑，真正实现可复用、可维护的动态内容驱动 UI。