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

  • 相关阅读:
    springmvc整合elasticsearch
    测试中出现ERROR StatusLogger No log4j2 configuration file
    SpringBoot项目取消数据库配置
    centos7 更换jdk版本
    对前后端解耦的理解
    满足java对redis的所有操作,token,验证码过期时间等
    在spring的过滤器中注入实体类(@autowire会失效可使用这个方法)
    linux 下vim中关于删除某段,某行,或全部删除的命令
    解决问题Can’t connect to local MySQL server through socket
    centos6.5 mqtt安装
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6193157.html
Copyright © 2011-2022 走看看