Angular Material Mat Stepper是否支持同时激活/显示多个步骤？

好问题！默认情况下，Angular Material的Mat Stepper确实是设计成一次只展示一个步骤的——不管是线性还是非线性模式，它的核心交互逻辑就是引导用户按顺序完成流程，所以原生并没有直接支持多步骤同时显示的配置项。不过我们可以通过自定义的方式来实现这个需求，下面分享两种可行的思路：

方法一：通过CSS覆盖默认隐藏样式 #

Mat Stepper的步骤内容默认会被设置为隐藏状态，我们可以通过自定义CSS来强制让多个步骤显示出来。这种方式比较简单，但要注意可能会影响组件的默认交互（比如步骤切换动画、状态样式）。

比如针对垂直步进器，让所有已激活及之前的步骤内容都显示：

/* 垂直步进器：显示所有已完成和当前步骤的内容 */
.mat-vertical-stepper .mat-step-content {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

/* 如果是水平步进器，调整内容区域的布局 */
.mat-horizontal-stepper .mat-horizontal-stepper-content {
  display: block !important;
}

如果只想显示特定的步骤，可以给步骤添加自定义类，再针对性设置样式：

<mat-step class="always-show">...</mat-step>

.mat-step.always-show .mat-step-content {
  display: block !important;
}

方法二：手动控制步骤内容的显示状态 #

这种方式更灵活，我们可以通过步进器的selectedIndex属性，结合*ngIf或[hidden]指令来手动控制每个步骤内容的显示，既保留步进器的头部导航功能，又能自由控制哪些步骤展示内容。

示例代码如下：

<mat-stepper #stepper [linear]="false">
  <mat-step [stepControl]="step1Form">
    <ng-template matStepLabel>用户信息</ng-template>
    <form [formGroup]="step1Form">
      <mat-form-field>
        <mat-label>姓名</mat-label>
        <input matInput formControlName="name" required>
      </mat-form-field>
      <button mat-button matStepperNext>下一步</button>
    </form>
  </mat-step>

  <mat-step [stepControl]="step2Form">
    <ng-template matStepLabel>地址信息</ng-template>
    <!-- 当选中索引大于等于1时显示步骤2内容 -->
    <div *ngIf="stepper.selectedIndex >= 1">
      <form [formGroup]="step2Form">
        <mat-form-field>
          <mat-label>地址</mat-label>
          <input matInput formControlName="address" required>
        </mat-form-field>
        <button mat-button matStepperPrevious>上一步</button>
        <button mat-button matStepperNext>下一步</button>
      </form>
    </div>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>确认信息</ng-template>
    <!-- 当选中索引大于等于2时显示步骤3内容 -->
    <div *ngIf="stepper.selectedIndex >= 2">
      <p>姓名: {{ step1Form.value.name }}</p>
      <p>地址: {{ step2Form.value.address }}</p>
      <button mat-button matStepperPrevious>上一步</button>
      <button mat-button (click)="submit()">提交</button>
    </div>
  </mat-step>
</mat-stepper>

注意事项 #

• 如果使用线性模式（[linear]="true"），默认逻辑会阻止跳转到未完成的步骤，所以如果要多步骤显示，建议将linear设为false，然后自己实现步骤的验证逻辑。
• 自定义实现后，需要手动处理步骤的状态样式（比如已完成、激活状态的视觉反馈），避免用户混淆。

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