如果某些條件為真，角度材料步進器會阻止前進

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)" >