Angular 7 - 与路由一起使用的步进器组件

Question

我需要 Angular 7 的 Stepper 组件的经过检查的解决方案，该解决方案可与 Angular 路由一起使用。

不是Material Design Stepper - 它确实适用于简单的表单，但不适用于路由。

我尝试做的事情<mat-horizontal-stepper>是这样的：

组件.html：

<mat-horizontal-stepper (selectionChange)="selectionChanged($event)" [linear]="true">
    <mat-step *ngFor="let step of steps; let i = index" [label]="step.title">
        <router-outlet *ngIf="i === selectedStepIndex"></router-outlet>
    </mat-step>
</mat-horizontal-stepper>

组件.ts：

public selectedStepIndex: number = 0;

selectionChanged(event: any) {
    this.selectedStepIndex= event.selectedIndex;
    const url = '/some-path/' + this.links[this.selectedStepIndex].path;
    this.router.navigate([url]);//using -> private router: Router
}

但是，由于某种原因我无法返回。Stepper 尝试向后导航，但它显示相同的页面，除非它是 Stepper ( i = 0) 的第一页。

我将非常感谢任何建议（也许还有工作示例），或者有关如何使用<mat-horizontal-stepper>.

Answer 1

好吧！我已经弄清楚了:)

看起来<mat-horizontal-stepper>需要一些时间来重新加载显示的步骤，<router-outlet>所以我不得不手动强迫他等待。做这样的事情，它会工作得足够好：

组件.html：

<mat-horizontal-stepper (selectionChange)="selectionChanged($event)" [linear]="true">
    <mat-step *ngFor="let step of steps; let i = index" [label]="step.title">
        <div *ngIf="loadingStep">
            <mat-spinner></mat-spinner>
        </div>
        <div *ngIf="!loadingStep">
            <router-outlet *ngIf="i === selectedStepIndex"></router-outlet>
        </div>
    </mat-step>
</mat-horizontal-stepper>

组件.ts：

public selectedStepIndex: number = 0;
public loadingStep: boolean = false;

selectionChanged(event: any) {
    this.selectedStepIndex = event.selectedIndex;
    if (event.previouslySelectedIndex > event.selectedIndex) {
        this.loadingStep = true;
        //Wait 1 sec. before showing the step
        setTimeout(() => {
            this.navigate();
            this.loadingStep = false;
        }, 1000);
    } else {
        this.navigate();
    }
}

private navigate(): void {
    const url = '/some-path/' + this.links[this.selectedStepIndex].path;
    this.router.navigate([url]);//using -> private router: Router
}

它并不完美，但对我来说已经足够了:))