国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

Angular實現預加載延遲模塊的示例

2019-11-19 15:11:16
字體:
來源:轉載
供稿:網友

在使用路由延遲加載中,我們介紹了如何使用模塊來拆分應用,在訪問到這個模塊的時候, Angular 加載這個模塊。但這需要一點時間。在用戶第一次點擊的時候,會有一點延遲。

我們可以通過預加載路由來修復這個問題。路由可以在用戶與其它部分交互的時候,異步加載延遲的模塊。這可以使用戶在訪問延遲模塊的時候更快地訪問。

本文將在上一個示例的基礎上,增加預加載的功能。

在上一節中,我們的根路由定義在 main.routing.ts,我們在 app.module.ts 中使用了根路由定義。

需要注意的是,Home 組件是提前加載的。我們將在系統啟動之后渲染這個組件。

在 Angular 渲染 Home 組件之后,用戶就可以與應用交互了,我們可以通過簡單的配置在后臺預加載其它模塊。

啟用預加載

我們在 forRoot 函數中,提供一個預加載的策略。

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 包中預定義了兩個策略:

  1. 不預加載 NoPreloading
  2. 預加載所有模塊 PreloadAllModules

5 秒之后加載模塊

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

您需要實現接口 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 使用這個自定義策略。需要注意的是,您還需要在 prodivers 中添加這個類。以實現依賴注入。

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 秒鐘之后,這個功能模塊被自動加載了。

加載指定模塊

我們還可以在路由中定義附加的參數來指定哪些模塊進行預加載,我們使用路由定義中的 data 來提供這個附加的數據。

import { Routes } from '@angular/router';// HomeComponent this components will be eager loadedimport { 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 { }

此時,可以看到,模塊直接被預加載了。即使您點擊鏈接,也不會再有新的請求發生。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 贵德县| 开封县| 福建省| 兴国县| 肃宁县| 罗定市| 都江堰市| 左权县| 陈巴尔虎旗| 株洲县| 安溪县| 平塘县| 平山县| 汤原县| 武冈市| 南岸区| 黄平县| 房产| 中西区| 张北县| 山阴县| 同德县| 禹州市| 浮梁县| 甘孜| 长沙市| 武冈市| 武平县| 连南| 蒙阴县| 乃东县| 临猗县| 中西区| 邳州市| 永新县| 白沙| 桐乡市| 奇台县| 泰和县| 云浮市| 会理县|