角材料步进器防止在某些条件为真时向前迈进

Question

我想知道如何跳过角度材料步进机中的阶跃变化。

我看到的每一个"解决方案"都不起作用。我还尝试将有关某些条件的步骤设置为可编辑=假。但这意味着，如果用户触摸一次该步骤，则无法编辑该步骤。初始化的步骤 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)" >