如何在Angular步进器组件中正确结合ng-content与for循环实现内容投影？

问题需求 #

创建可复用的Angular步进器组件，结合内容投影（<ng-content>）与*ngFor循环，让循环生成的每一项HTML内容作为步进器的步骤。当前按钮间无内容显示，需解决如何正确在循环中使用<ng-content>，无需实现按钮切换逻辑。

问题分析 #

当前代码的核心问题：

• 宿主组件中，*ngFor生成的step-item元素被嵌套在父容器<div class="flex">内，Angular的<ng-content>默认不会穿透嵌套结构捕获目标元素，导致步进器无法正确投影内容。
• 步进器组件中@ViewChild('step')引用的#step标记不存在，导致stepElement始终为null。

解决方案 #

1. 调整宿主组件结构 #

将*ngFor直接作为<app-ui-stepper>的子元素，让每个step-item元素成为组件的直接子节点，确保<ng-content>能正确匹配并投影内容。

修改后的宿主组件代码：

<app-ui-stepper>
  <!-- 直接将*ngFor生成的元素作为步进器的子元素 -->
  <div *ngFor="let step of stepperArray" step-item style="border: 1px orange solid">
    <div>{{step}}</div>
    <div>blah blah</div>
    <div style="background-color: blueviolet; height: 100px; width: 30px;"></div>
  </div>
</app-ui-stepper>

2. 修正步进器组件代码 #

移除无效的@ViewChild('step')引用，改用@ViewChildren获取所有投影进来的步骤元素（便于后续步骤管理），同时保持<ng-content>的选择器正确。

修改后的步进器组件TS代码：

import { AfterViewInit, Component, Input, QueryList, ViewChildren, ElementRef } from '@angular/core';

export class AppUIStepperComponent implements AfterViewInit {
    @Input() allowStep: boolean = true;
    @Input() nextStepAllowed: boolean = true;
    // 获取所有step-item元素
    @ViewChildren('[step-item]') stepRefs!: QueryList<ElementRef>;
    stepElements!: HTMLElement[];

    constructor() {}

    ngAfterViewInit(): void {
        // 将QueryList转为数组，便于后续操作
        this.stepElements = this.stepRefs.map(ref => ref.nativeElement);
    }

    onNext() {}
    onPrevious() {}
}

步进器组件HTML代码可保持不变（若需单步显示，可添加索引控制，示例如下）：

<div class="stepper-container flex">
    <div class="flex-xy-center">
        <a class="stepper-button stepper-button-left" (click)="onPrevious()">&#10094;</a>
    </div>
    <!-- 投影所有step-item，若需单步显示可添加控制逻辑 -->
    <div>
        <ng-content select="[step-item]"></ng-content>
    </div>
    <div class="flex-xy-center">
        <a class="stepper-button stepper-button-right" (click)="onNext()">&#10095;</a>
    </div>
</div>

可选：单步显示控制（无需按钮逻辑可忽略） #

若要实现单步显示，可在步进器组件中添加当前步骤索引，结合[hidden]或*ngIf控制：

TS中添加索引变量：

currentStepIndex = 0;

HTML修改投影部分：

<div>
    <ng-content *ngFor="let _ of stepElements; let i = index" 
                select="[step-item]" 
                [hidden]="i !== currentStepIndex">
    </ng-content>
</div>

核心原理 #

• <ng-content>的选择器仅匹配组件的直接子元素（或符合选择器的直接子元素），因此需避免将投影内容嵌套在额外容器中。
• 使用@ViewChildren可批量获取所有投影进来的步骤元素，为后续步骤切换、状态管理提供支持。

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