如果某些条件为真，角度材料步进器会阻止前进

Question

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

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

如果值等于“停止”，我想跳过阶跃变化。

闪电战

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() {}
}

对于需要以下用例：

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

Answer 1

尝试创建禁用名称的 css 类

用material.component.css在你的css文件中写这个

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

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

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