私はmatStepperを使用していて、selectedIndexを3に設定すると、nextおよびpreviousを使用してナビゲートできません。水平ステッパーの(1)をクリックして、通常どおりnext/prevを使用できます。すべてのフォームが有効であり、(1)をクリックした後、1〜7を使用してナビゲートできます。
これに注意してください.selectedIndex = 3;ハードコード
<mat-horizontal-stepper #stepper
[linear]="true"
[selectedIndex]="this.selectedIndex"
(selectionChange)="selectionChange(stepper)">
<mat-step [stepControl]="form1">
<app-observer-information></app-observer-information>
</mat-step>
...
<mat-step [stepControl]="form7">
<app-observer-agreement></app-observer-agreement>
</mat-step>
</mat-horizontal-stepper>
export class ObservationStatementStepperComponent implements OnInit {
@ViewChild('ObserverInformationComponent') public component1: ObserverInformationComponent;
..
@ViewChild('ObserverAgreementComponent') public component7: ObserverAgreementComponent;
public selectedIndex: number;
constructor(private sorDataService: SorDataService) {
this.selectedIndex = 3; // Number(sorDataService.selectedIndex);
}
public ngOnInit() {
}
public selectionChange(stepper) {
this.sorDataService.synchronizeStepper(stepper.selectedIndex + 1);
}
/**
* @see https://stackoverflow.com/questions/48498966/angular-material-stepper-component-for-each-step
*/
get form1() {
return this.component1 ? this.component1.form : null;
}
...
get form7() {
return this.component7 ? this.component7.form : null;
}
}
問題はスタックブリッツで再現されます
<mat-horizontal-stepper linear #stepper [selectedIndex]="1">
https://stackblitz.com/edit/angular-syml71?file=app/create-profile.component.html
クイックハック:
HTML:
<mat-vertical-stepper [linear]="true" #stepper>
TS:
@ViewChild('stepper')
stepper: MatStepper;
nextClick(): void {
this.stepper.linear = false;
this.stepper.selectedIndex = ...;
this.stepper.linear = true;
}
これを
[linear]="true"
で機能させるには、0
delayを指定したsetTimeout
関数を使用します。setTimeout(() => { this.stepper.selectedIndex = ...; });
参照: https://github.com/angular/components/issues/8479#issuecomment-444063732