本文主要介紹angular實現(xiàn)預加載延遲模塊的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能幫助到大家。
在使用路由延遲加載中，我們介紹了如何使用模塊來拆分應(yīng)用，在訪問到這個模塊的時候， Angular 加載這個模塊。但這需要一點時間。在用戶第一次點擊的時候，會有一點延遲。
我們可以通過預加載路由來修復這個問題。路由可以在用戶與其它部分交互的時候，異步加載延遲的模塊。這可以使用戶在訪問延遲模塊的時候更快地訪問。
本文將在上一個示例的基礎(chǔ)上，增加預加載的功能。
在上一節(jié)中，我們的根路由定義在 main.routing.ts，我們在 app.module.ts 中使用了根路由定義。
需要注意的是，Home 組件是提前加載的。我們將在系統(tǒng)啟動之后渲染這個組件。
在 Angular 渲染 Home 組件之后，用戶就可以與應(yīng)用交互了，我們可以通過簡單的配置在后臺預加載其它模塊。
啟用預加載
我們在 forRoot 函數(shù)中，提供一個預加載的策略。
import?{?BrowserModule?}?from?'@angular/platform-browser'; import?{?NgModule?}?from?'@angular/core'; import?{?AppComponent?}?from?'./app.component'; import?{?HomeComponent?}?from?'./home/home.component'; import?{?routes?}?from?'./main.routing'; import?{?RouterModule?}?from?'@angular/router'; import?{?PreloadAllModules?}?from?'@angular/router'; @NgModule({ ?declarations:?[ ??AppComponent, ??HomeComponent ?], ?imports:?[ ??BrowserModule, ??RouterModule.forRoot(routes,?{?preloadingStrategy:?PreloadAllModules?}) ?], ?providers:?[], ?bootstrap:?[AppComponent] }) export?class?AppModule?{?}
這個 PreloadAllModules 策略來自 @angular/router，所以我們還需要導入它。
定制預加載策略
router 包中預定義了兩個策略：
-
不預加載 NoPreloading
-
預加載所有模塊 PreloadAllModules
5 秒之后加載模塊
但是，您可以自己定義一個定制的策略。這比您想的要更為簡單。例如，您希望在應(yīng)用初始化 5 秒之后加載其余的模塊。
您需要實現(xiàn)接口 PreloadingStrategy，我們定義一個 CustomPreloadingStrategy 的自定義策略類。
import?{?Route?}?from?'@angular/router'; import?{?PreloadingStrategy?}?from?'@angular/router'; import?{?Observable?}?from?'rxJS/Rx'; export?class?CustomPreloadingStrategy?implements?PreloadingStrategy?{ ??preload(route:?Route,?fn:?()?=>?Observable<boolean>):?Observable<boolean>?{ ????return?Observable.of(true).delay(5000).flatMap((_:?boolean)?=>?fn()); ??} }</boolean></boolean>
然后，修改 app.module.ts 使用這個自定義策略。需要注意的是，您還需要在 propers 中添加這個類。以實現(xiàn)依賴注入。
import?{?BrowserModule?}?from?'@angular/platform-browser'; import?{?NgModule?}?from?'@angular/core'; import?{?AppComponent?}?from?'./app.component'; import?{?HomeComponent?}?from?'./home/home.component'; import?{?routes?}?from?'./main.routing'; import?{?RouterModule?}?from?'@angular/router'; import?{?CustomPreloadingStrategy?}?from?'./preload'; @NgModule({ ?declarations:?[ ??AppComponent, ??HomeComponent ?], ?imports:?[ ??BrowserModule, ??RouterModule.forRoot(routes,?{?preloadingStrategy:?CustomPreloadingStrategy?}) ?], ?providers:?[CustomPreloadingStrategy?], ?bootstrap:?[AppComponent] }) export?class?AppModule?{?}
你會看到 在 5 秒鐘之后，這個功能模塊被自動加載了。
加載指定模塊
我們還可以在路由中定義附加的參數(shù)來指定哪些模塊進行預加載，我們使用路由定義中的 data 來提供這個附加的數(shù)據(jù)。
import?{?Routes?}?from?'@angular/router'; //?HomeComponent?this?components?will?be?eager?loaded import?{?HomeComponent?}?from?'./home/home.component'; export?const?routes:?Routes?=?[ ??{?path:?'',?component:?HomeComponent,?pathMatch:?'full'?}, ??{?path:?'shop',?loadChildren:?'./shop/shop.module#ShopModule',?data:?{preload:?true}?}, ??{?path:?'**',?component:?HomeComponent?} ];
然后，我們定義新的加載策略。
import?{?Observable?}?from?'rxjs/Rx'; import?{?PreloadingStrategy,?Route?}?from?'@angular/router'; export?class?PreloadSelectedModules?implements?PreloadingStrategy?{ ??preload(route:?Route,?load:?Function):?Observable<any>?{ ????return?route.data?&&?route.data.preload???load()?:?Observable.of(null); ??} }</any>
最后，在 app.module.ts 中使用這個策略。
import?{?BrowserModule?}?from?'@angular/platform-browser'; import?{?NgModule?}?from?'@angular/core'; import?{?AppComponent?}?from?'./app.component'; import?{?HomeComponent?}?from?'./home/home.component'; import?{?routes?}?from?'./main.routing'; import?{?RouterModule?}?from?'@angular/router'; import?{?PreloadSelectedModules?}?from?'./preload.module'; @NgModule({ ?declarations:?[ ??AppComponent, ??HomeComponent ?], ?imports:?[ ??BrowserModule, ??RouterModule.forRoot(routes,?{?preloadingStrategy:?PreloadSelectedModules?}) ?], ?providers:?[PreloadSelectedModules?], ?bootstrap:?[AppComponent] }) export?class?AppModule?{?}
此時，可以看到，模塊直接被預加載了。即使您點擊鏈接，也不會再有新的請求發(fā)生。
相關(guān)推薦：
詳解Laravel如何通過預加載優(yōu)化Model查詢
