如何让Angular Mat Stepper在移动端始终保持水平显示？

问题根源在你代码里的[orientation]="(stepperOrientation | async)!"绑定——这个异步管道一般是用来根据屏幕宽度自动切换步进器的水平/垂直布局的，所以移动端会自动切换成垂直视图。要强制始终显示水平布局，按以下步骤修改：

1. 固定orientation属性值 #

直接把动态绑定的orientation改成固定的"horizontal"，移除异步管道逻辑：

修改后的步进器代码：

<mat-horizontal-stepper #stepper
    [@.disabled]="true"
    [linear]="isLinear"
    class="example-stepper"
    orientation="horizontal"
>
    <!-- 步骤内容保持不变 -->
    <mat-step [stepControl]="firstFormGroup" label="Setup Piggy Bank" [editable]="!this.alreadyExistUser">
        <form [formGroup]="firstFormGroup">
            <div formControlName="firstCtrl" ngDefaultControl>
                <app-create-savings-plan [planInfoData]="planInfoData" [storeData]="storeData" (savingPlanDetails)="submitSavingPlanDetails($event)"></app-create-savings-plan>
            </div>
        </form>
    </mat-step>
    <mat-step [stepControl]="thirdFormGroup" label="Confirm">
        <form [formGroup]="thirdFormGroup">
            <div formControlName="thirdCtrl" ngDefaultControl>
                <app-confirm-plan [createdSavingsPlanInfo]="createdSavingsPlanInfo" [storeData]="storeData" (confirmPlan)="confirmCreatedPlan($event)"></app-confirm-plan>
            </div>
        </form>
    </mat-step>
</mat-horizontal-stepper>

2. 清理相关TS逻辑（如果存在） #

如果你的组件类里有创建stepperOrientation Observable的代码（比如监听BreakpointObserver），可以直接删除这部分，因为现在不需要动态切换了。类似以下代码可以移除：

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

// ...

stepperOrientation: Observable<'horizontal' | 'vertical'>;

constructor(private breakpointObserver: BreakpointObserver) {
  this.stepperOrientation = breakpointObserver.observe(Breakpoints.Handset)
    .pipe(map(result => result.matches ? 'vertical' : 'horizontal'));
}

3. 强制CSS覆盖（可选） #

如果修改后移动端仍有样式异常，可添加自定义CSS强制步进器保持水平布局：

@media (max-width: 599px) {
    .mat-horizontal-stepper {
        flex-direction: row !important;
    }
    .mat-horizontal-stepper-header-container {
        flex-direction: row !important;
        overflow-x: auto;
    }
}

这样就能确保无论屏幕尺寸大小，步进器始终以水平布局展示。

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