如何使用延迟加载角材料重置/重新加载动态步进器组件

Question

我创建了一个动态步进器组件，并延迟加载了三个模块。有一个父导航器选项卡，当单击时，router链接到步进器组件，它假定要加载第一步CategorylistModule的模块并重置步进器。问题在于模块已加载，但stepper的步骤未更新。例如，如果我单击第2步，然后单击导航器，则会看到在第二步中加载了第一个模块CategorylistModule，而第一个步骤没有触发。

  (.html)
  <mat-horizontal-stepper (selectionChange)="selectionChanged($event)" [linear]="false" #stepper >
    <mat-step *ngFor="let step of steps; let i = index" [routerLink]="['/step' + i]" >
      <div *ngIf="!loadingStep">
          <router-outlet *ngIf="i === selectedStepIndex"></router-outlet>
      </div>
    </mat-step>
  </mat-horizontal-stepper>


(.routing.ts)

  path: '', redirectTo: 'search', pathMatch: 'full'
  },
  { 
    path: "search",
    component: StepperComponent,
    children: [
      {
        path: 'step2',
        loadChildren: './grid/grid.module#GridModule'
      },
      {
        path: 'step1',
        loadChildren: './form/form.module#FormModule'
      },
      {
        path: 'step0',
        loadChildren: './categorylist/categorylist.module#CategorylistModule'
      },

(stepper.ts)
    selectionChanged(event: any) {

    this.selectedStepIndex = event.selectedIndex;

    if (event.previouslySelectedIndex > event.selectedIndex) {
    this.loadingStep = true;
      setTimeout(() => {
        this.navigate();
        this.loadingStep = false;
      }, 1000);
    } else {
        this.navigate();
      }
  }
    private navigate(): void {
      this.router.navigate([this.steps[this.selectedStepIndex].title],{relativeTo:this.route});
  }