是否存在支持将独立Angular组件作为步骤内容的向导/步进器？（不依赖Angular Material）

我完全懂你想要的是什么——一个不绑死在Angular Material上的灵活步进器，每个步骤都是独立的Angular组件，各自管好自己的逻辑，同时能通过服务顺畅地共享数据，不用把所有代码堆在同一个TS文件里。下面给你一套可落地的实现方案：

1. 先搞一个共享数据服务 #

这个服务是各个步骤组件之间的“数据桥梁”，用BehaviorSubject来维护共享状态，确保所有组件都能拿到最新的数据：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class StepperDataService {
  private stepDataSubject = new BehaviorSubject<Record<string, any>>({});
  stepData$ = this.stepDataSubject.asObservable();

  // 更新指定步骤的数据
  updateStepData(stepKey: string, data: any) {
    const currentData = this.stepDataSubject.value;
    this.stepDataSubject.next({ ...currentData, [stepKey]: data });
  }

  // 获取所有共享数据
  getAllStepData() {
    return this.stepDataSubject.value;
  }

  // 获取单个步骤的数据
  getStepData(stepKey: string) {
    return this.stepDataSubject.value[stepKey] || null;
  }
}

2. 构建步进器容器组件 #

这个组件是整个步进器的“大脑”，负责管理步骤列表、当前步骤，以及动态加载/销毁各个步骤组件：

首先定义步骤的类型（可以放在容器组件的TS文件里，或者单独的类型文件）：

export interface StepConfig {
  key: string; // 步骤唯一标识
  label: string; // 步骤显示名称
  component: any; // 对应的步骤组件
}

然后是容器组件的TS代码：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
import { StepConfig } from './step-config.interface';
import { StepperDataService } from './stepper-data.service';
// 导入你的所有步骤组件
import { LongstepsComponentStart } from './longsteps-component-start/longsteps-component-start.component';
import { Step1Component } from './step1-component/step1-component.component';
import { Step2Component } from './step2-component/step2-component.component';
import { Step3Component } from './step3-component/step3-component.component';
import { StepFinalComponent } from './step-final-component/step-final-component.component';

@Component({
  selector: 'app-custom-stepper',
  template: `
    <div class="stepper-header">
      <div 
        *ngFor="let step of steps; let i = index"
        class="step-label"
        [class.active]="currentStepIndex === i"
        [class.completed]="currentStepIndex > i"
      >
        {{ step.label }}
      </div>
    </div>

    <div class="stepper-content">
      <ng-template #stepContainer></ng-template>
    </div>

    <div class="stepper-controls">
      <button 
        (click)="goToPrevious()"
        [disabled]="currentStepIndex === 0"
      >
        上一步
      </button>
      <button 
        (click)="goToNext()"
        [disabled]="!currentStepIsValid()"
      >
        {{ currentStepIndex === steps.length - 1 ? '完成' : '下一步' }}
      </button>
    </div>
  `,
  styles: [`
    .stepper-header { display: flex; gap: 2rem; margin-bottom: 2rem; }
    .step-label { padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; }
    .step-label.active { background-color: #007bff; color: white; }
    .step-label.completed { background-color: #28a745; color: white; }
    .stepper-content { margin: 2rem 0; padding: 1rem; border: 1px solid #eee; border-radius: 4px; }
    .stepper-controls { display: flex; gap: 1rem; justify-content: flex-end; }
  `]
})
export class CustomStepperComponent implements OnInit {
  @ViewChild('stepContainer', { read: ViewContainerRef }) stepContainer!: ViewContainerRef;

  steps: StepConfig[] = [
    { key: 'start', label: '开始', component: LongstepsComponentStart },
    { key: 'step1', label: '步骤1', component: Step1Component },
    { key: 'step2', label: '步骤2', component: Step2Component },
    { key: 'step3', label: '步骤3', component: Step3Component },
    { key: 'final', label: '完成', component: StepFinalComponent },
  ];

  currentStepIndex = 0;
  currentStepInstance: any;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private stepperDataService: StepperDataService
  ) {}

  ngOnInit() {
    this.loadCurrentStep();
  }

  private loadCurrentStep() {
    // 清空之前的组件
    this.stepContainer.clear();
    const currentStep = this.steps[this.currentStepIndex];
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(currentStep.component);
    this.currentStepInstance = this.stepContainer.createComponent(componentFactory).instance;
  }

  goToNext() {
    // 先把当前步骤的数据存入共享服务
    if (this.currentStepInstance?.saveData) {
      this.currentStepInstance.saveData();
    }
    if (this.currentStepIndex < this.steps.length - 1) {
      this.currentStepIndex++;
      this.loadCurrentStep();
    } else {
      // 处理完成逻辑，比如提交所有数据
      const allData = this.stepperDataService.getAllStepData();
      console.log('所有步骤数据:', allData);
      // 这里可以加你的提交逻辑
    }
  }

  goToPrevious() {
    if (this.currentStepIndex > 0) {
      this.currentStepIndex--;
      this.loadCurrentStep();
    }
  }

  private currentStepIsValid(): boolean {
    // 调用当前步骤组件的验证方法，默认返回true（如果组件没实现的话）
    return this.currentStepInstance?.isValid?.() ?? true;
  }
}

3. 编写独立的步骤组件 #

每个步骤组件只需要专注自己的业务逻辑，通过共享服务传递数据。比如以Step1Component为例：

import { Component } from '@angular/core';
import { StepperDataService } from '../stepper-data.service';

@Component({
  selector: 'app-step1',
  template: `
    <h3>步骤1：填写基本信息</h3>
    <div>
      <label>姓名：</label>
      <input [(ngModel)]="formData.name" type="text">
    </div>
    <div>
      <label>邮箱：</label>
      <input [(ngModel)]="formData.email" type="email">
    </div>
  `
})
export class Step1Component {
  formData = this.stepperDataService.getStepData('step1') || { name: '', email: '' };

  constructor(private stepperDataService: StepperDataService) {}

  // 保存当前步骤数据到共享服务
  saveData() {
    this.stepperDataService.updateStepData('step1', this.formData);
  }

  // 验证当前步骤是否填写完整
  isValid(): boolean {
    return !!this.formData.name && !!this.formData.email;
  }
}

其他步骤组件（比如start、step2等）都可以按照这个模式来写，各自维护自己的表单和逻辑，不用和其他步骤耦合。

4. 关键注意事项 #

• 组件声明：确保所有步骤组件都在你的模块中声明（或者用独立组件），Angular 9+之后动态组件不需要再手动添加到entryComponents，但如果是旧版本需要加上。
• 服务单例：我们的StepperDataService用了providedIn: 'root'，确保整个应用中是单例，所有步骤组件共享同一个实例。
• 自定义样式：容器组件里的样式只是基础款，你可以根据自己的UI需求完全自定义。
• 扩展功能：如果需要支持跳转到任意步骤，可以在步进器头部的label上添加点击事件，调用类似goToStep(index)的方法。

这样实现出来的步进器完全满足你的需求：每个步骤都是独立组件，逻辑分散在各自的TS文件，通过服务共享数据，完全不依赖Angular Material。

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