Как сбросить / перезагрузить динамический шаговый компонент, используя ленивую загрузку углового материала - PullRequest
Новая
       4

Как сбросить / перезагрузить динамический шаговый компонент, используя ленивую загрузку углового материала

0 голосов
/ 01 октября 2019

Я создал динамический шаговый компонент и лениво загружаю три модуля. Есть родительская вкладка навигатора, и когда нажимается роутер, связывается с компонентом степпера, и это предполагает загрузку модуля первого шага CategorylistModule и сброс степпера. Проблема в том, что модуль загружен, но шаг степпера не обновляется. Например, если я нажимаю шаг 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});
  }
...