探究Angular Material Stepper接收组件作为输入的可行性

完全支持，你可以通过内容投影或动态组件加载两种核心方式来实现这个需求，下面分别给出具体实现方案：

方式一：内容投影（静态传入组件） #

这种方式适合提前确定步骤内容的场景，利用Angular的ng-content将父组件传入的自定义组件嵌入到Stepper的每一步中。

1. 创建高阶Stepper封装组件 #

// stepper-wrapper.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-stepper-wrapper',
  templateUrl: './stepper-wrapper.component.html',
})
export class StepperWrapperComponent {
  @Input() linear = true; // 控制是否线性步骤
}

<!-- stepper-wrapper.component.html -->
<mat-stepper [linear]="linear">
  <!-- 接收父组件传入的所有步骤内容 -->
  <ng-content></ng-content>
</mat-stepper>

2. 父组件中使用（传入自定义组件） #

<!-- parent.component.html -->
<app-stepper-wrapper [linear]="true">
  <mat-step label="第一步">
    <!-- 传入自定义的StepOneComponent -->
    <app-step-one (onNext)="goToNextStep()"></app-step-one>
  </mat-step>
  <mat-step label="第二步">
    <!-- 传入自定义的StepTwoComponent -->
    <app-step-two></app-step-two>
  </mat-step>
</app-stepper-wrapper>

方式二：动态组件加载（动态生成步骤） #

如果需要根据数据动态生成步骤，或者动态切换不同组件，就需要用动态组件加载的方式。

1. 定义步骤配置接口 #

// step.interface.ts
export interface StepConfig {
  label: string;
  component: any; // 要加载的组件类型
  data?: any; // 传递给组件的初始数据
}

2. 实现高阶Stepper组件 #

// dynamic-stepper-wrapper.component.ts
import { Component, Input, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { StepConfig } from './step.interface';

@Component({
  selector: 'app-dynamic-stepper-wrapper',
  template: `
    <mat-stepper [linear]="linear">
      <mat-step *ngFor="let step of steps" [label]="step.label">
        <!-- 动态组件容器 -->
        <ng-template #stepContainer></ng-template>
      </mat-step>
    </mat-stepper>
  `,
})
export class DynamicStepperWrapperComponent {
  @Input() steps: StepConfig[] = [];
  @Input() linear = true;
  @ViewChild('stepContainer', { read: ViewContainerRef, static: false }) stepContainer!: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngAfterViewInit() {
    this.loadDynamicComponents();
  }

  private loadDynamicComponents() {
    this.steps.forEach(step => {
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(step.component);
      const componentRef = this.stepContainer.createComponent(componentFactory);
      
      // 传递数据给动态组件
      if (step.data) {
        Object.assign(componentRef.instance, step.data);
      }
      
      // 监听组件输出事件（比如下一步）
      componentRef.instance.onNext?.subscribe(() => {
        // 处理下一步逻辑，比如调用Stepper的next()方法
      });
    });
  }
}

3. 父组件中使用 #

// parent.component.ts
import { Component } from '@angular/core';
import { StepConfig } from './step.interface';
import { StepOneComponent } from './step-one.component';
import { StepTwoComponent } from './step-two.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  stepConfigs: StepConfig[] = [
    {
      label: '第一步',
      component: StepOneComponent,
      data: { initialValue: '初始数据' }
    },
    {
      label: '第二步',
      component: StepTwoComponent
    }
  ];
}

<!-- parent.component.html -->
<app-dynamic-stepper-wrapper [steps]="stepConfigs" [linear]="true"></app-dynamic-stepper-wrapper>

注意事项 #

• 动态加载的组件需要在所属模块的declarations数组中声明，Angular 9+版本无需额外配置entryComponents，低版本需添加到该数组。
• 组件间的通信可以通过@Input()传递数据、@Output()触发事件，或者使用共享服务实现跨组件通信。
• 可结合Angular Material Stepper原生API（如stepControl绑定表单、completed控制步骤完成状态）增强功能。

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