如何使用Angular Material垂直步进器实现从底部到顶部的排序布局

在Angular Material中，MatStepper默认按照数组顺序从上到下渲染垂直步骤。如果业务要求步骤从底部开始、向顶部递增，就需要对步骤数据和DOM呈现方式做调整。下面介绍一种不修改组件源码、仅通过数据与模板控制来实现底部到顶部排序的思路。

一、基本垂直步进器结构

先建立一个普通的垂直步进器，使用mat-vertical-stepper标签，步骤由组件中的数组驱动。

<mat-vertical-stepper [selectedIndex]="selectedIndex">
  <mat-step *ngFor="let step of steps" [label]="step.label">
    <p>{{ step.content }}</p>
    <button matButton matStepperNext>下一步</button>
  </mat-step>
</mat-vertical-stepper>

二、将步骤数据反转

实现底部到顶部排序的核心，是把步骤数组倒序。可以在组件里用一个getter返回反转后的列表，模板遍历这个列表即可。

import { Component } from '@angular/core';

@Component({
  selector: 'app-bottom-up-stepper',
  templateUrl: './bottom-up-stepper.html'
})
export class BottomUpStepperComponent {
  // 原始步骤，索引0为逻辑第一步
  rawSteps = [
    { label: '填写资料', content: '请输入基础信息' },
    { label: '确认提交', content: '核对以上内容' },
    { label: '完成', content: '流程结束' }
  ];

  // 反转后，索引0在视图中处于最底部
  get steps() {
    return [...this.rawSteps].reverse();
  }

  selectedIndex = 0;
}

模板中使用反转数据

把之前的steps直接绑定到反转后的getter，这样第一步会渲染在最下方。

<mat-vertical-stepper [selectedIndex]="selectedIndex">
  <mat-step *ngFor="let step of steps" [label]="step.label">
    <p>{{ step.content }}</p>
    <button matButton matStepperPrevious>上一步</button>
    <button matButton matStepperNext>下一步</button>
  </mat-step>
</mat-vertical-stepper>

三、控制初始选中位置

因为数组反转了，逻辑上的第一步对应反转数组的最后一项。若希望打开页面就停在底部第一步，需要设置selectedIndex为steps长度减一。

ngOnInit() {
  // 反转后最后一项才是逻辑第一步，位于底部
  this.selectedIndex = this.steps.length - 1;
}

四、样式与交互微调

垂直步进器自带的连接线方向不变，仅顺序变化通常不影响使用。如果希望滚动条默认停在底部，可以在视图初始化后操作容器滚动。

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('stepperContainer') container: ElementRef;

ngAfterViewInit() {
  const el = this.container.nativeElement;
  el.scrollTop = el.scrollHeight;
}

对应地在模板外层包一个可滚动容器：

<div #stepperContainer style="max-height:400px; overflow:auto;">
  <mat-vertical-stepper>
    <!-- 步骤内容 -->
  </mat-vertical-stepper>
</div>

五、注意事项

• 反转数据不会影响MatStepper内部状态机，下一步上一步仍然按视图顺序走。
• 若步骤含表单校验，请保证reverse前后的数据引用一致，避免校验错乱。
• 不建议直接改Material源码，上述方式在升级库版本时更安全。

通过以上方法，就能用Angular Material垂直步进器实现从底部到顶部的排序布局，满足逆向流程类的界面需求。

Angular_Materialvertical_stepperstep_sortingMatStepperUI_layout修改时间：2026-07-25 11:42:22