如何根据已解析的路由数据路由到子路由？

Question

I'm loading a module with data from the resolver. The loaded module has the usual empty-path redirect to the first child route. But I want to redirect to a specific route based on the resolved data.

In the current example I have a child module with three components. The Resolver in the root module provides the data to which component should be redirected to.

AppModule:

const routes = [
  {
    path: '',
    redirectTo: 'steps',
    pathMatch: 'full'
  },  {
    path: 'steps',
    loadChildren: './steps/steps.module#StepsModule',
    resolve: {
      step: StepResolver,
    }
  },
]

@NgModule({
  imports:      [ BrowserModule, RouterModule.forRoot(routes) ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

ChildModule:

const routes = [
  {
    path: '',
    redirectTo: 'step1', // <-- this has to be dynamic based on the provided data
    pathMatch: 'full'
  },  {
    path: 'step1',
    component: Step1Component
  },  {
    path: 'step2',
    component: Step2Component
  }, {
    path: 'step3',
    component: Step3Component
  },
]

@NgModule({
  imports:      [ CommonModule, RouterModule.forChild(routes) ],
  declarations: [ Step1Component, Step2Component, Step3Component ],
})
export class StepsModule { }

The Resolver returns the step that should be redirected to

@Injectable({
  providedIn: 'root'
})
export class StepResolver implements Resolve<string> {
  resolve(route: ActivatedRouteSnapshot): Observable<string> {
    return of('step2');
  }
}

How can I redirect to the route based on the provided data? Are there any routing hooks that I can use?

Throughts:

• CanActivate on the empty child path -> CanActivate is called after provide, so: no data
• load an empty component in empty child path and trigger the redirect at OnInit -> a bit smelly for me

Answer 1

You could evaluate what next step is necessary and then navigate to the the specific route:

this.route.navigate([yourStep]);

You would have to import Router :

constructor(private route: Router) { }

Edit:
Create a service with something like this:

goToStep(step: string) {
  this.route.navigate([step]);
}

And the resolver considering the code you provided:

resolve(route: ActivatedRouteSnapshot): Observable<string> {
   return this.stepService.goToStep('step2');
}