Angular實(shí)現(xiàn)預(yù)加載延遲模塊的方法-創(chuàng)新互聯(lián)

Angular實(shí)現(xiàn)預(yù)加載延遲模塊的方法？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

創(chuàng)新互聯(lián)是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì)，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價(jià)比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺(tái)等全方位的服務(wù)。

在使用路由延遲加載中，我們介紹了如何使用模塊來拆分應(yīng)用，在訪問到這個(gè)模塊的時(shí)候， Angular 加載這個(gè)模塊。但這需要一點(diǎn)時(shí)間。在用戶第一次點(diǎn)擊的時(shí)候，會(huì)有一點(diǎn)延遲。

我們可以通過預(yù)加載路由來修復(fù)這個(gè)問題。路由可以在用戶與其它部分交互的時(shí)候，異步加載延遲的模塊。這可以使用戶在訪問延遲模塊的時(shí)候更快地訪問。

本文將在上一個(gè)示例的基礎(chǔ)上，增加預(yù)加載的功能。

在上一節(jié)中，我們的根路由定義在 main.routing.ts，我們在 app.module.ts 中使用了根路由定義。

需要注意的是，Home 組件是提前加載的。我們將在系統(tǒng)啟動(dòng)之后渲染這個(gè)組件。

在 Angular 渲染 Home 組件之后，用戶就可以與應(yīng)用交互了，我們可以通過簡單的配置在后臺(tái)預(yù)加載其它模塊。

啟用預(yù)加載

我們在 forRoot 函數(shù)中，提供一個(gè)預(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 { }

這個(gè) PreloadAllModules 策略來自 @angular/router，所以我們還需要導(dǎo)入它。

定制預(yù)加載策略

router 包中預(yù)定義了兩個(gè)策略：

1. 不預(yù)加載 NoPreloading

2. 預(yù)加載所有模塊 PreloadAllModules

5 秒之后加載模塊

但是，您可以自己定義一個(gè)定制的策略。這比您想的要更為簡單。例如，您希望在應(yīng)用初始化 5 秒之后加載其余的模塊。

您需要實(shí)現(xiàn)接口 PreloadingStrategy，我們定義一個(gè) 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 使用這個(gè)自定義策略。需要注意的是，您還需要在 propers 中添加這個(gè)類。以實(shí)現(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 { }

你會(huì)看到 在 5 秒鐘之后，這個(gè)功能模塊被自動(dòng)加載了。

加載指定模塊

我們還可以在路由中定義附加的參數(shù)來指定哪些模塊進(jìn)行預(yù)加載，我們使用路由定義中的 data 來提供這個(gè)附加的數(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 中使用這個(gè)策略。

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 { }

此時(shí)，可以看到，模塊直接被預(yù)加載了。即使您點(diǎn)擊鏈接，也不會(huì)再有新的請求發(fā)生。

感謝各位的閱讀！看完上述內(nèi)容，你們對Angular實(shí)現(xiàn)預(yù)加載延遲模塊的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

新聞標(biāo)題：Angular實(shí)現(xiàn)預(yù)加載延遲模塊的方法-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://bm7419.com/article16/dpocgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、電子商務(wù)、網(wǎng)站導(dǎo)航、移動(dòng)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)