zoukankan      html  css  js  c++  java
  • [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">
      <md-card>
        <router-outlet name="list"></router-outlet>
      </md-card>
      <md-card>
        <router-outlet name="bio"></router-outlet>
      </md-card>
    </div>

    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',
        outlet:'aux',
        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-layout>
      <md-sidenav align="start" mode="side" opened>
        <app-sidenav></app-sidenav>
      </md-sidenav>
      <div class="main-content">
        <router-outlet></router-outlet>
      </div>
      <md-sidenav align="end" mode="side" [opened]="curtPath === 'preview'">
        <router-outlet name="aux"></router-outlet>
      </md-sidenav>
    </md-sidenav-layout>

    Github, Talk

  • 相关阅读:
    Linux入门之系统启动
    2017.12.25 Android数据存储方案
    2017.12.18 Android开发之进程讲解
    2017.12.18 Android开发之消息队列(实现子线程修改UI组件)
    2017.12.4 Android开发之ListView组件
    2017.12.10 把KIE的jbpm_console嵌入到我们的web项目中
    2017.12.07 React组件嵌套以及for循环渲染子组件
    2017.12.07 React路由到不同组件界面
    2017.12.07 Ajax获取服务器数据并发送到前端
    B-树&B+树以及其在数据库中的应用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6193157.html
Copyright © 2011-2022 走看看