Angular 16多步骤组件改造：实现单面板按需渲染

基于你现有的多步骤组件体系，要实现仅渲染当前选中的面板并随projectedIndex切换，需要修改组件的内容渲染逻辑——原有的<ng-content>会投影所有面板，无法做到按需渲染。以下是具体修改步骤：

1. 完善MultiStepPanelComponent（若未实现） #

确保面板组件能正确获取内容和页脚的模板引用：

// multi-step-panel.component.ts
import { Component, Input, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-multi-step-panel',
  template: '' // 组件本身无需模板，内容通过投影传入
})
export class MultiStepPanelComponent {
  @Input() title!: string;
  // 获取内容模板（对应你使用的panelContent模板引用）
  @ContentChild('panelContent') panelContent!: TemplateRef<any>;
  // 获取页脚模板
  @ContentChild('panelFooter') panelFooter!: TemplateRef<any>;
}

2. 修改MultiStepComponent逻辑 #

更新组件类，保存面板数组并添加边界检查：

// multi-step.component.ts
import { Component, AfterContentInit, ContentChildren, QueryList } from '@angular/core';
import { MultiStepPanelComponent } from './multi-step-panel.component';

@Component({
  selector: 'app-multi-step',
  templateUrl: './multi-step.component.html',
  styleUrls: ['./multi-step.component.scss']
})
export class MultiStepComponent implements AfterContentInit {

  @ContentChildren(MultiStepPanelComponent) panels!: QueryList<MultiStepPanelComponent>;
  panelList: Array<string> = [];
  projectedIndex = 0;
  // 保存面板数组，方便快速访问当前面板
  panelArray: MultiStepPanelComponent[] = [];

  ngAfterContentInit() {
    this.updatePanelData();
    // 监听面板列表变化，动态更新数据
    this.panels.changes.subscribe(() => this.updatePanelData());
  }

  private updatePanelData() {
    this.panelList = this.panels.map(p => p.title);
    this.panelArray = this.panels.toArray();
    // 切换后若索引超出范围，重置到有效索引
    if (this.projectedIndex >= this.panelArray.length) {
      this.projectedIndex = this.panelArray.length - 1;
    }
  }

  setProjection(index: number) {
    // 边界检查，防止越界
    if (index >= 0 && index < this.panelArray.length) {
      this.projectedIndex = index;
    }
  }

  // 封装下一步方法，供外部调用
  handleNext() {
    this.setProjection(this.projectedIndex + 1);
  }

  // 封装上一步方法
  handlePrev() {
    this.setProjection(this.projectedIndex - 1);
  }
}

3. 修改MultiStepComponent模板 #

替换原有的<ng-content>，改为动态渲染当前索引的面板内容和页脚：

<!-- multi-step.component.html -->

<div class="card">
  <div class="card-body">
    <div class="multisteps-form__progress">
      <button 
        [disabled]="i > projectedIndex" 
        (click)="setProjection(i)" 
        class="multisteps-form__progress-btn" 
        [class.js-active]="i <= projectedIndex" 
        type="button" 
        title="{{panelTitle}}" 
        *ngFor="let panelTitle of panelList; let i=index"
      >
        {{panelTitle}}
      </button>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-12 col-lg-8 m-auto">
    <!-- 仅渲染当前索引的面板 -->
    <ng-container *ngIf="panelArray[projectedIndex]">
      <!-- 渲染面板内容 -->
      <ng-template [ngTemplateOutlet]="panelArray[projectedIndex].panelContent"></ng-template>
      
      <!-- 渲染面板页脚 + 统一上一步按钮 -->
      <div class="mt-3 d-flex gap-2">
        <button *ngIf="projectedIndex > 0" (click)="handlePrev()">Previous</button>
        <ng-template [ngTemplateOutlet]="panelArray[projectedIndex].panelFooter"></ng-template>
      </div>
    </ng-container>
  </div>
</div>

4. 更新父组件调用方式 #

给app-multi-step添加模板引用，让面板按钮调用组件的切换方法：

<!-- app.component.html -->

<app-multi-step #multiStep>
  <app-multi-step-panel title="Basic">
    <ng-template #panelContent>
       <div>Panel content</div>
    </ng-template>
    <ng-template #panelFooter>
      <button (click)="multiStep.handleNext()">Next</button>
    </ng-template>
  </app-multi-step-panel>

  <app-multi-step-panel title="Settings">
    <ng-template #panelContent>
       <div>Settings content</div>
    </ng-template>
    <ng-template #panelFooter>
      <!-- 最后一步显示完成按钮 -->
      <button *ngIf="multiStep.projectedIndex === multiStep.panelArray.length - 1">Finish</button>
    </ng-template>
  </app-multi-step-panel>
</app-multi-step>

其他方案建议 #

• 使用Angular Material Stepper：如果项目已引入Angular Material，直接使用MatStepper组件，它内置了多步骤切换、验证、状态管理等功能，无需自定义开发。
• 路由驱动的多步骤：若每个步骤对应独立路由，可以用Angular Router实现切换，适合步骤内容复杂、需要路由导航的场景。

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