angular2路由預載實例詳解-js教程-PHP中文網

angular2路由預載實例詳解

小云云

發布： 2018-01-27 14:21:00

原創

1313 人瀏覽過

本文主要介紹了淺談angular2路由預載策略，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

1.問題描述

在沒有讓路由懶載入的時候，第一次使用的時候載入特別慢，影響使用者體驗，angular2可以使用loadChildren進行懶加載，第一次使用的時候只會加載需要的模組，其它模組在真正使用的時候才會去加載，這個時候打開瀏覽器控制台查看js加載的時候，會發現你使用時候會去載入對應的js，導致第一次點擊對應模組的功能時會卡頓一下，後面在使用就不會了，這樣還是使用者體驗不好，接下來告訴你如果使用預載策略解決這個問題。

2.預先載入策略

RouterModule.forRoot的第二個新增了一個設定選項，這人設定選項中就有一個是preloadingStrategy配置，當然它還有其它配置，這裡只講preloadingStrategy，這個配置是一個預加載策略配置，我們需要實現一個自己的預加載策略，在一些不需要預先加載的場景加我們可以不配置，首先我們新建一個selective-preloading-strategy.ts的文件，使用class實作PreloadingStrategy介面的preload方法，程式碼如下：

import { PreloadingStrategy, Route } from "@angular/router";
import { Observable } from "rxjs";
/**
 * 预加载策略
 */
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    //当路由中配置data: {preload: true}时预加载
    return route.data && route.data && route.data[&#39;preload&#39;] ? load() : Observable.of(null);
  }

}

登入後複製

上面的意思很簡單，當你在路由中配置了data: {preload: true}參數後，這裡面的策略就返回一個load()，表示需要預先加載，如果沒有配置就不進行預加載，當然你也可以反過來，預設是預加載，只在配置不需要預先加載的時候不加載，就像我的github上的一樣，自己靈活運用。

接下來，在路由中加入策略，也就是RouterModule.forRoot中的配置，程式碼如下：

import { NgModule }       from &#39;@angular/core&#39;;
import { RouterModule, Routes } from &#39;@angular/router&#39;;

import {SelectivePreloadingStrategy} from "./selective-preloading-strategy";

import { LoginComponent }   from &#39;./login/login.component&#39;;
import { MainComponent }  from &#39;./main/main.component&#39;;



/**
 * app路由
 */
const routes: Routes = [
 { path: &#39;&#39;, redirectTo: &#39;/login&#39;, pathMatch: &#39;full&#39; },
 { 
   path: &#39;login&#39;, 
   component: LoginComponent
 },
 { 
   path: &#39;app&#39;, 
   component: MainComponent,
   loadChildren: &#39;app/main/main.module#MainModule&#39;,
   data: {preload: true}
 }
];

export const appRoutes=RouterModule.forRoot(routes,{preloadingStrategy: SelectivePreloadingStrategy});

登入後複製

還需要在AppModule的providers添加，程式碼如下：

/**
 * app模块
 */
@NgModule({
 imports: [
  appRoutes,
  BrowserModule,
  BrowserAnimationsModule,
  NgbModule.forRoot(),
  MainModule,
  LoginModule
 ],
 declarations: [
  AppComponent,
  ToastBoxComponent,
  ToastComponent,
  SpinComponent
 ],
 providers: [AppService,ToastService,HttpService,SpinService,SelectivePreloadingStrategy],
 exports:[ToastBoxComponent,SpinComponent],
 bootstrap: [ AppComponent ]
})
export class AppModule {}

登入後複製

# 接下來在路由中使用，程式碼如下：

import { NgModule, OnInit } from &#39;@angular/core&#39;;
import { RouterModule, Routes, Router } from &#39;@angular/router&#39;;

/**
 * 主体路由
 */
const routes: Routes = [
   { path: &#39;home&#39;, loadChildren: &#39;app/home/home.module#HomeModule&#39;, data: {preload: true} },
   { path: &#39;demo&#39;, loadChildren: &#39;app/demo/demo.module#DemoModule&#39;, data: {preload: true} },
];

export const mainRoutes = RouterModule.forChild(routes);

登入後複製

打開瀏覽器F12，查看js的加載，你會發現，當頁面加載完後，會預先加載其它模組的js