如果某些条件为真，Angular Material Stepper 会阻止 Step forward答案

【问题标题】：Angular Material Stepper prevent Step forward if some condition is true如果某些条件为真，Angular Material Stepper 会阻止 Step forward
【发布时间】：2020-05-07 14:34:10
【问题描述】：

我想知道如何在 Angular Material Stepper 中跳过一步更改。

我看到的每个“解决方案”都不起作用。我还尝试将有关某些条件的步骤设置为可编辑 = 假。但这意味着，如果用户触摸一次，则该步骤无法编辑。用editable=false初始化的步骤可以编辑:(

如果值等于“停止”，我想跳过步骤更改。

Stackblitz

import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild("stepper") stepper;
  constructor(private router: Router) {
    this.router.navigate(['material']);
  }
  showMaterialPage() {}
}

需要以下用例：

用户会看到一个带有许多输入字段、复选框等的自定义公式。如果他进行了更改但没有提交更改并且他将单击另一个对话框，那么应该检查他是否更改了值。如果是，则会弹出一个确认对话框。在此对话框中，将询问用户是否放弃更改。如果他说不，那么当前选择的步骤不应该离开。这在我的应用程序中对我有用，但问题是动画无论如何都完成了，所以它在视觉上看起来用户在下一步。

【问题讨论】：

如果你在这一步使用 *ngIf 指令会怎样第二步
不幸的是用户必须看到这些步骤。
第二步
也不行。一旦 inputValue 为“Stop”，图标就会变为已完成的图标，但我仍然可以导航:(

标签： angular stepper mat-stepper

【解决方案1】：

尝试创建禁用名称的 css 类

把这个写在你的css文件中withmaterial.component.css

.disabled{
  pointer-events: none !important;
}

并将其写入您的 withmaterial.component.html

<mat-horizontal-stepper [ngClass]="{'disabled':inputValue =='stop'}" [linear]="false" #stepper (selectionChange)="checkValue($event)" >

【讨论】：

谢谢，但这也不是我的解决方案。用户应该能够单击并收到消息。抱歉，我更新了我的问题中的用例。