如何关闭Angular Material Stepper？寻求mat-button实现方案

嘿，我懂你想要实现的需求——用mat-button来关闭Angular Material Stepper对吧？官方文档里确实没直接给出这个功能的说明，但我们可以通过几种简单的方式来达成目标，下面给你详细说说：

方案一：通过*ngIf控制显示/隐藏（最直接） #

这是最简单的实现方式，我们可以用一个布尔变量来控制Stepper是否渲染在DOM中。当点击按钮时切换变量值，就能直接让Stepper消失。

组件类代码： #

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

@Component({
  selector: 'app-stepper-example',
  templateUrl: './stepper-example.component.html',
  styleUrls: ['./stepper-example.component.css']
})
export class StepperExampleComponent {
  isStepperVisible = true;

  closeStepper() {
    this.isStepperVisible = false;
  }
}

模板代码： #

<!-- 仅当isStepperVisible为true时，Stepper才会渲染 -->
<mat-vertical-stepper *ngIf="isStepperVisible">
  <mat-step label="Step 1">
    第一步内容区域
  </mat-step>
  <mat-step label="Step 2">
    第二步内容区域
  </mat-step>
</mat-vertical-stepper>

<!-- 触发关闭的按钮 -->
<button mat-button (click)="closeStepper()">关闭Stepper</button>

方案二：通过CSS类隐藏（保留DOM结构） #

如果你不想移除Stepper的DOM节点，只是想让它隐藏起来（比如需要保留当前步骤、表单填写状态），可以用CSS类来控制显示状态。

组件类代码： #

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

@Component({
  selector: 'app-stepper-example',
  templateUrl: './stepper-example.component.html',
  styleUrls: ['./stepper-example.component.css']
})
export class StepperExampleComponent {
  isStepperHidden = false;

  toggleStepper() {
    this.isStepperHidden = !this.isStepperHidden;
  }
}

模板代码： #

<!-- 通过ngClass切换隐藏类 -->
<mat-horizontal-stepper [ngClass]="{'hidden-stepper': isStepperHidden}">
  <mat-step label="Step 1">
    第一步内容区域
  </mat-step>
  <mat-step label="Step 2">
    第二步内容区域
  </mat-step>
</mat-horizontal-stepper>

<button mat-button (click)="toggleStepper()">
  {{ isStepperHidden ? '显示Stepper' : '关闭Stepper' }}
</button>

CSS样式： #

.hidden-stepper {
  display: none;
  /* 若只想隐藏但保留占位空间，可替换为：visibility: hidden; */
}

方案三：结合步骤状态关闭（完成后触发） #

如果你的需求是在所有步骤完成后才允许关闭Stepper，可以结合Stepper的步骤状态来做判断。

组件类代码示例： #

import { Component, ViewChildren, QueryList } from '@angular/core';
import { MatStep } from '@angular/material/stepper';

@Component({
  selector: 'app-stepper-example',
  templateUrl: './stepper-example.component.html',
  styleUrls: ['./stepper-example.component.css']
})
export class StepperExampleComponent {
  isStepperVisible = true;
  @ViewChildren(MatStep) steps!: QueryList<MatStep>;

  checkAllStepsCompleted(): boolean {
    return this.steps.every(step => step.completed);
  }

  closeStepperAfterCompletion() {
    if (this.checkAllStepsCompleted()) {
      this.isStepperVisible = false;
    } else {
      alert('请先完成所有步骤再关闭！');
    }
  }
}

模板代码： #

<mat-vertical-stepper *ngIf="isStepperVisible">
  <mat-step label="Step 1" [completed]="false">
    <button mat-button (click)="steps.get(0)!.completed = true">标记为完成</button>
  </mat-step>
  <mat-step label="Step 2" [completed]="false">
    <button mat-button (click)="steps.get(1)!.completed = true">标记为完成</button>
  </mat-step>
</mat-vertical-stepper>

<button mat-button (click)="closeStepperAfterCompletion()">完成所有步骤后关闭</button>

小提示： #

• 使用*ngIf会直接移除Stepper的DOM节点，再次显示时会重置Stepper的状态（比如回到第一步）；如果需要保留状态，优先选CSS隐藏的方式。
• 如果Stepper内包含表单，记得在关闭前保存表单数据，避免内容丢失。

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