您好,登錄后才能下訂單哦!
Angular實現(xiàn)預(yù)加載延遲模塊的方法?這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
在使用路由延遲加載中,我們介紹了如何使用模塊來拆分應(yīng)用,在訪問到這個模塊的時候, Angular 加載這個模塊。但這需要一點時間。在用戶第一次點擊的時候,會有一點延遲。
我們可以通過預(yù)加載路由來修復(fù)這個問題。路由可以在用戶與其它部分交互的時候,異步加載延遲的模塊。這可以使用戶在訪問延遲模塊的時候更快地訪問。
本文將在上一個示例的基礎(chǔ)上,增加預(yù)加載的功能。
在上一節(jié)中,我們的根路由定義在 main.routing.ts,我們在 app.module.ts 中使用了根路由定義。
需要注意的是,Home 組件是提前加載的。我們將在系統(tǒng)啟動之后渲染這個組件。
在 Angular 渲染 Home 組件之后,用戶就可以與應(yīng)用交互了,我們可以通過簡單的配置在后臺預(yù)加載其它模塊。
啟用預(yù)加載
我們在 forRoot 函數(shù)中,提供一個預(yù)加載的策略。
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,所以我們還需要導(dǎo)入它。
定制預(yù)加載策略
router 包中預(yù)定義了兩個策略:
不預(yù)加載 NoPreloading
預(yù)加載所有模塊 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()); } }
然后,修改 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ù)來指定哪些模塊進行預(yù)加載,我們使用路由定義中的 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); } }
最后,在 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 { }
此時,可以看到,模塊直接被預(yù)加載了。即使您點擊鏈接,也不會再有新的請求發(fā)生。
感謝各位的閱讀!看完上述內(nèi)容,你們對Angular實現(xiàn)預(yù)加載延遲模塊的方法大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。