zoukankan      html  css  js  c++  java
  • [Angular2 Router] Preload lzay loading modules

    From router v3.1.0, we have preloading system with router.

    PreloadAllModules

    After the init module loaded, router will preloading the rest module at the background. 

    const indexRoute = {path: '', redirectTo: 'home', pathMatch: 'full'};
    const fallbackRoute = {path: '**', component: NotFoundComponent};
    const routes = [
      {path: 'legacy-url', redirectTo: '/home', pathMatch: 'prefix'},
      {path: 'home', loadChildren: 'app/home/home.module', name: 'Home'},
      {path: 'heros', loadChildren: 'app/heros/heros.module', name: 'Heros'},
      {path: 'contact', loadChildren: 'app/contact/contact.module', name: 'Contact'},
      indexRoute,
      fallbackRoute,
    ];
    
    export default RouterModule.forRoot(routes, {
      useHash: true,
      preloadingStrategy: PreloadAllModules
    });

    Custom Preload Strategy:

    const indexRoute = {path: '', redirectTo: 'home', pathMatch: 'full'};
    const fallbackRoute = {path: '**', component: NotFoundComponent};
    const routes = [
      {path: 'legacy-url', redirectTo: '/home', pathMatch: 'prefix'},
      {path: 'home', loadChildren: 'app/home/home.module', name: 'Home'},
      {path: 'heros', loadChildren: 'app/heros/heros.module', name: 'Heros', data: {preload: true}},
      {path: 'contact', loadChildren: 'app/contact/contact.module', name: 'Contact', data: {preload: true}},
      {path: 'message', loadChildren: 'app/message/message.module', name: 'Message'},
      indexRoute,
      fallbackRoute,
    ];
    
    export default RouterModule.forRoot(routes, {
      useHash: true,
      preloadingStrategy: PreloadSelectedModuledsList
      //preloadingStrategy: PreloadAllModules
    });

    In the router config, we use :

    data: {preload: true}

    To tell which modue should be preloaded.

    Then provide a custom loading strategy:

    import {PreloadingStrategy, Route} from "@angular/router";
    import {Observable} from "rxjs";
    export class PreloadSelectedModuledsList implements PreloadingStrategy {
      preload(route: Route, load: Function): Observable<any> {
        return route.data.preload ? load() : Observable.of(null);
      }
    
    }

    Last step, in the app.module.ts, inject the provider to the providers list:

      providers: [
        {provide: APP_BASE_HREF, useValue: '/'},
        {
          provide: API_URL,
          useValue: `https://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK`
        },
        {
          provide: STARWARS_BASE_URL,
          useValue: `https://starwars-json-server-ewtdxbyfdz.now.sh`
        },
        PreloadSelectedModuledsList
      ],

    Github

  • 相关阅读:
    实用硬件篇(一)
    iOS通讯录(纯纯的干货)
    iOS社会化分享(干货)
    静态库的打包及使用(干货)
    iOS地图集成示例:百度地图POI检索
    iOS开发之KVC全解
    网络干货
    输入一个字符串,按字典序打印出该字符串中字符的所有排列(剑指offer)
    序列化二叉树
    二叉树中和为某一值的路径
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5958150.html
Copyright © 2011-2022 走看看