本文详解如何在 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.ts
import { 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.ts
import { 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。
