[Angular Router] Lazy loading Module with Auxiliary router

发布时间:2017-2-25 3:35:41 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"[Angular Router] Lazy loading Module with Auxiliary router ",主要涉及到[Angular Router] Lazy loading Module with Auxiliary router 方面的内容,对于[Angular Router] Lazy loading Module with Auxiliary router 感兴趣的同学可以参考一下。

Found the way to handle Auxiliary router for lazy loading moudle and erge load module are different. 

In Erge loading, it is recommended to create a shell component, inside shell component you need to define the router-outlet for each Auxiliary routes and primary route.

const routes: Routes = [
  { path: 'speakers', component: SpeakersComponent, children: [
    { path: 'speakersList', component: SpeakersListComponent, outlet: 'list' },
    { path: ':id', component: BioComponent, outlet: 'bio' }
  ] },

For example, in the code above, 'SpeakersComponent' is shell component.

<div class="columns">
    <router-outlet name="list"></router-outlet>
    <router-outlet name="bio"></router-outlet>

Inside the html, it defines all the auxilliary routes for shell component. 

But the story changes when you use lazy loading...

For example, we lazy load a feature module inside our root routes configuration:

    path: 'preview',
    loadChildren: 'app/preview/preview.module'

And here is the feature module routes:

const routes = [
    path: '',
    component: PreviewLeftComponent
    path: ':id',
    component: PokemonDetailComponent
    path: ':id',
    component: PreviewDetailComponent

There is one auxiliary route. But here we didn't use any shell component.

This is because I found, when using lazy loading, Angular doesn't goes into Shell component html to find auxiliary routes' router-outlet, it goes to root component,

So we have to define the auxiliary route outlet inside root component:

<!-- aoo.component.html -->

  <md-sidenav align="start" mode="side" opened>
  <div class="main-content">
  <md-sidenav align="end" mode="side" [opened]="curtPath === 'preview'">
    <router-outlet name="aux"></router-outlet>