Ich habe eine Frage zu Winkelmaterial (mit Winkel 4+). Sagen Sie in meiner Komponentenvorlage, ich füge eine <mat-horizontal-stepper>
-Komponente hinzu, und in jedem Schritt <mat-step>
habe ich Stepper-Buttons, um die Komponente zu navigieren. Wie so ...
<mat-horizontal-stepper>
<mat-step>
Step 1
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</mat-step>
<mat-step>
Step 2
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</mat-step>
<mat-step>
Step 3
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</mat-step>
</mat-horizontal-stepper>
Jetzt frage ich mich, ob es möglich ist, die Schaltflächen aus jedem Schritt zu entfernen und sie an anderer Stelle im <mat-horizontal-stepper>
in einer statischen Position oder sogar außerhalb des <mat-horizontal-stepper>
zu haben, und ich kann mit Code in meiner Komponenten-TypeScript-Datei vorwärts und rückwärts navigieren. Um eine Idee zu geben, möchte ich, dass mein HTML so ähnlich ist
<mat-horizontal-stepper>
<mat-step>
Step 1
</mat-step>
<mat-step>
Step 2
</mat-step>
<mat-step>
Step 3
</mat-step>
<!-- one option -->
<div>
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</div>
</mat-horizontal-stepper>
<!-- second option -->
<div>
<button (click)="goBack()" type="button">Back</button>
<button (click)="goForward()" type="button">Next</button>
</div>
Ja. Mit der selectedIndex
-Eigenschaft der MatStepper
können Sie zu einem bestimmten Stepper springen. MatStepper
macht auch öffentliche Methoden next()
und previous()
verfügbar. Sie können sie verwenden, um sich vor und zurück zu bewegen.
In Ihrer Vorlage:
Fügen Sie Ihrem Stepper eine ID hinzu, z. #stepper
. Übergeben Sie dann in Ihren goBack()
- und goForward()
-Methoden die Stepper-ID:
<mat-horizontal-stepper #stepper>
<!-- Steps -->
</mat-horizontal-stepper>
<!-- second option -->
<div>
<button (click)="goBack(stepper)" type="button">Back</button>
<button (click)="goForward(stepper)" type="button">Next</button>
</div>
.. und in Ihrem TypeScript:
import { MatStepper } from '@angular/material/stepper';
goBack(stepper: MatStepper){
stepper.previous();
}
goForward(stepper: MatStepper){
stepper.next();
}
Link zu stackblitz demo .
Sie können die Schaltflächen Back
und Next
folgendermaßen aktivieren/deaktivieren:
<button (click)="goBack(stepper)" type="button"
[disabled]="stepper.selectedIndex === 0">Back</button>
<button (click)="goForward(stepper)" type="button"
[disabled]="stepper.selectedIndex === stepper._steps.length-1">Next</button>
Wenn Sie programmgesteuert navigieren möchten zum nächsten Schritt und wenn Sie mit einem linearen Schritt sind, gehen Sie folgendermaßen vor:
stepper
wie folgt: <mat-horizontal-stepper linear #matHorizontalStepper>
mat-step
Wie folgt: <mat-step [completed]="isThisStepDone">
mat-step
Eine Schaltfläche, um zum nächsten Schritt zu gelangen: <button (click)="next(matHorizontalStepper)">NEXT STEP</button>
.ts
Eine MatStepper
-Referenz mit dem Namen stepper :@ViewChild('matHorizontalStepper') stepper: MatStepper;
.ts
isThisStepDone
als false: isThisStepDone: boolean = false;
Dann schreiben Sie die Methode für die NEXT STEP Taste mit dem Namen next()
:
submit(stepper: MatStepper) {
this.isThisStepDone = true;
setTimeout(() => { // or do some API calls/ Async events
stepper.next();
}, 1);
}
Neben der Antwort von @ Faisal ist es meine Meinung, den MatStepper zu springen, ohne den Stepper in den Argumenten übergeben zu müssen.
Dies ist hilfreich, wenn Sie mehr Flexibilität bei der Bearbeitung des Steppers benötigen, z. von einer Service
oder etwas anderem.
HTML:
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="6px">
<button (click)="move(0)">1st</button>
<button (click)="move(1)">2nd</button>
<button (click)="move(2)">3rd</button>
<button (click)="move(3)">4th</button>
</div>
TS-Datei:
move(index: number) {
this.stepper.selectedIndex = index;
}
Hier ist die stackblitz Demo .
Sie können dies auch tun, indem Sie den aktuellen Index des Steppers mithilfe von selectedIndex angeben.
stackblitz: https://stackblitz.com/edit/angular-4rvy2s?file=app%2Fstepper-overview-example.ts
HTML:
<div class="fab-nav-container">
<mat-vertical-stepper linear="false" #stepper>
<mat-step *ngFor="let step of stepNodes; let i = index">
<ng-template matStepLabel>
<p> {{step.title}} </p>
</ng-template>
</mat-step>
</mat-vertical-stepper>
</div>
<div class="button-container">
<div class="button-grp">
<button mat-stroked-button (click)="clickButton(1, stepper)">1</button>
<button mat-stroked-button (click)="clickButton(2, stepper)">2</button>
<button mat-stroked-button (click)="clickButton(3, stepper)">3</button>
</div>
</div>
TS:
import {Component, OnInit, ViewChild} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { MatVerticalStepper } from '@angular/material';
import { MatStepper } from '@angular/material';
export interface INodes {
title: string;
seq: number;
flowId: string;
}
/**
* @title Stepper overview
*/
@Component({
selector: 'stepper-overview-example',
templateUrl: 'stepper-overview-example.html',
styleUrls: ['stepper-overview-example.scss'],
})
export class StepperOverviewExample implements OnInit {
@ViewChild(MatVerticalStepper) vert_stepper: MatVerticalStepper;
@ViewChild('stepper') private myStepper: MatStepper;
stepNodes: INodes[] = [
{ title: 'Request Submission', seq: 1, flowId: 'xasd12'},
{ title: 'Department Approval', seq: 2, flowId: 'erda23'},
{ title: 'Requestor Confirmation', seq: 3, flowId: 'fsyq51'},
];
ngOnInit() {
}
ngAfterViewInit() {
this.vert_stepper._getIndicatorType = () => 'number';
}
clickButton(index: number, stepper: MatStepper) {
stepper.selectedIndex = index - 1;
}
}