web-dev-qa-db-ja.com

Angular Material-マットステッパーがステップ間を移動しないようにする

私はmat-horizontal-stepperここで、線形プロパティをtrueに設定します。すべてのステップが有効になった時点で、ヘッダーまたはラベルをクリックして前のステップに移動できます。そのプロパティは必要ありません。

ボタンだけをナビゲートする必要があります。

私はポインタ機能を無効にしてみました：

    .mat-horizontal-stepper-header{
       pointer-events: none;
     }

しかし、うまくいきませんでした。

ヘッダーをクリックしてナビゲーションを停止するか、ステッパーヘッダーをクリックして関数を起動する必要があります。

angularangular-materialangular-material2angular-material-stepper
5
Sathyamoorthy Ponnusamy

最初に投稿したもの：

.mat-horizontal-stepper-header{
    pointer-events: none;
}

::ng-deepをCSSクラスに追加する限り機能します。このような：

::ng-deep .mat-horizontal-stepper-header {
    pointer-events: none !important;
}

また、vertical oneではなくhorizo​​ntalステッパーを使用していることを確認してください。これは、適切なCSSクラスを呼び出すときに明らかに重要です。

9
CAlex

ヘッダーをクリックしてイベントを取得するには、これを使用します-

<mat-horizontal-stepper (selectionChange)="stepClick($event)" [linear]="isLinear" #stepper="matHorizontalStepper">

Tsファイルでコンポーネント-

stepClick(ev) {console.log(ev)}
6
satyendra kumar

mat-stepのeditableをfalseに設定します

<mat-step editable="false"> ... </mat-step>
4
Milan

私はあなたと同じような問題を抱えていました、そして私がやったことは：

  1. HTMLでは、[編集可能]および[完了]をfalseとして構成しました

<mat-step [completed]="false" [editable]="false">

  1. .tsファイルでは、対応するアクションにより以下がトリガーされます。
this.stepper.selected.completed = true;
this.stepper.next();

そしてもちろん、線形モードを有効にしました。

3
voukvouk

ステッパーヘッダーをクリックしたときに関数を起動するには、MatStepper.selectionChange。ステップを切り替えるときに出力され、前のステップと選択したステップに関する情報を提供します。

html：

<mat-horizontal-stepper #stepper[linear]="true">
  <mat-step label="firstStep">
    ...
  </mat-step>
</mat-horizontal-stepper>

ts：

class ExampleComponent implements OnInit {
  @ViewChild('stepper') stepper: MatStepper;

  ngOnInit() {
    this.stepper.selectionChange.subscribe(selection => {
       console.log(selection.selectedStep)
       console.log(selection.previouslySelectedStep)
    }
 }

選択したステップが最後のステップである場合、これを使用してeditable = false前のすべてのステップ：

this.stepper._steps.forEach(step => step.editable = false);
2
Mel

私はこれを試しましたが、うまくいきませんでした。

 ::ng-deep .mat-horizontal-stepper-header {
        pointer-events: none !important;
    }

それから私はこれを試しました。

.mat-step-header {
            pointer-events: none !important;
        }

これは絶対にうまくいきました。

ありがとうございました

1
Vishal Chavan