Mam pytanie dotyczące Angular Material (z Angular 4+). Powiedz w moim szablonie komponentów, że dodaję <mat-horizontal-stepper>
komponent, a na każdym kroku <mat-step>
mam przyciski krokowe do nawigacji po komponencie. Tak jak tak ...
<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>
Teraz zastanawiam się, czy możliwe jest usunięcie przycisków z każdego kroku i umieszczenie ich w innym miejscu <mat-horizontal-stepper>
w pozycji statycznej lub nawet poza <mat-horizontal-stepper>
i mogę nawigować wstecz i do przodu za pomocą kodu w moim pliku maszynopisu komponentu. Aby dać pomysł, chciałbym, aby mój HTML wyglądał mniej więcej tak
<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>
źródło
ViewChild
i widziałem, jak mogę się odnieść do Steppera - ale pokonałeś mnie w tym! Podoba mi się fakt, że dodałeś również funkcję wyłączania / włączania! Miej kilka punktów!ViewChild
jest również dobrą opcją na zakup stepera. Ale wolałbym przekazać legitymację. Dodałem teżViewChild
rozwiązanie w wersji demo \ o /Oprócz odpowiedzi @ Faisal , to jest moje podejście do wykonywania skoku MatSteppera bez konieczności przekazywania steppera w argumentach.
Jest to pomocne, gdy potrzebujesz większej elastyczności w manipulowaniu stepperem np. Z
Service
czegoś innego.HTML:
Plik TS:
Oto demo stackblitz .
źródło
Jeśli chcesz programowo przejść do następnego kroku i używasz liniowego steppera , wykonaj poniższe czynności:
stepper
taki:<mat-horizontal-stepper linear #matHorizontalStepper>
mat-step
ten sposób:<mat-step [completed]="isThisStepDone">
mat-step
utwórz przycisk, aby przejść do następnego kroku, takiego jak ten:<button (click)="next(matHorizontalStepper)">NEXT STEP</button>
.ts
pliku zadeklarujMatStepper
odwołanie o nazwie stepper :@ViewChild('matHorizontalStepper') stepper: MatStepper;
.ts
pliku inicjalizujisThisStepDone
jako fałsz :isThisStepDone: boolean = false;
Następnie napisz metodę dla przycisku NEXT STEP o nazwie
next()
:źródło
setTimeout()
) jest wymagana ze względu na propagację stanu za pośrednictwemisThisStepDone
.Możesz to również zrobić, podając rzeczywisty indeks steppera za pomocą selectedIndex.
stackblitz: https://stackblitz.com/edit/angular-4rvy2s?file=app%2Fstepper-overview-example.ts
HTML:
TS:
źródło
@ViewChild('stepper') private myStepper: MatStepper;
i niżthis.matStepper.next();
w mojej funkcji. Działa idealnie