如何使用*ngFor创建包含独立组件的Mat-Step分步器？

要通过*ngFor复用mat-step结构，你可以按以下步骤操作：

1. 父组件中定义步骤组件列表 #

在父组件的TS文件里，先导入所有20个表单组件，再将它们存入一个数组：

import { Component1 } from './component1.component';
import { Component2 } from './component2.component';
// 依次导入Component3至Component20

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class ParentComponent {
  // 存储所有步骤对应的组件类
  stepComponents = [Component1, Component2, /* ... 补充Component3至Component20 */];
  // 初始化你的表单实例
  form1 = this.fb.group({
    // 此处定义表单控件，需包含各子组件对应的字段
  });

  constructor(private fb: FormBuilder) {}
}

2. 模板中用*ngFor生成重复的mat-step #

在父组件模板里，通过*ngFor遍历组件数组，结合ngComponentOutlet动态渲染每个步骤的表单组件：

<mat-stepper>
  <mat-step *ngFor="let comp of stepComponents; let stepIndex = index">
    <form [formGroup]="form1">
      <!-- 动态加载当前步骤的表单组件 -->
      <ng-container *ngComponentOutlet="comp"></ng-container>
    </form>
    <div>
      <!-- 非最后一步显示Next按钮，最后一步替换为提交按钮 -->
      <button matStepperNext *ngIf="stepIndex < stepComponents.length - 1">Next</button>
      <button (click)="onSubmit()" *ngIf="stepIndex === stepComponents.length - 1">Submit</button>
    </div>
  </mat-step>
</mat-stepper>

关键注意事项 #

• 确保所有子表单组件都已添加到当前模块的declarations数组中（Angular 9及以上版本无需额外配置entryComponents）。
• 每个子组件需正确关联父表单form1：可以通过@Input()接收父表单实例，或在子组件模板中用formGroupName绑定到form1的嵌套表单组。

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