web-dev-qa-db-ger.com

Angular Material - Verhindern, dass der Mattenstepper zwischen den Schritten navigiert

Ich habe einen mat-horizontal-stepper, bei dem ich die lineare Eigenschaft auf true gesetzt habe. Wenn alle Schritte ab jetzt gültig sind, kann ich durch Klicken auf die Kopfzeile oder das Etikett zu vorherigen Schritten navigieren. Ich will diese Eigenschaft nicht. 

Ich muss nur durch Tasten navigieren. 

Ich habe versucht, die Zeigerfunktion zu deaktivieren: 

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

aber es hat nicht funktioniert. 

Ich muss entweder die Navigation durch Klicken auf die Kopfzeile beenden oder eine Funktion auslösen, indem Sie auf die Stepper-Kopfzeile klicken.

Für mat-step editierbar auf false setzen

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

Um ein Ereignis im Header zu erhalten, klicken Sie auf

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

In TS-Datei die Komponente - 

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

Was Sie ursprünglich geschrieben haben:

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

funktioniert, solange Sie der CSS-Klasse ::ng-deep hinzufügen. So was:

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

Stellen Sie außerdem sicher, dass Sie den horizontal - Stepper anstelle des vertical verwenden. Dies ist offensichtlich wichtig, wenn die entsprechende CSS-Klasse aufgerufen wird.

3
CAlex

Um eine Funktion auszulösen, wenn Sie auf den Stepper-Header klicken, können Sie MatStepper.selectionChange abonnieren. Sie wird beim Wechseln von Schritten ausgegeben und informiert Sie über den vorherigen Schritt und den ausgewählten Schritt.

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

Wenn der ausgewählte Schritt der letzte ist, können Sie hiermit editable = false in allen vorherigen Schritten festlegen:

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