Angular实现预加载延迟模块的示例


Posted in Javascript onOctober 12, 2017

在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候, 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 秒钟之后,这个功能模块被自动加载了。

Angular实现预加载延迟模块的示例

加载指定模块

我们还可以在路由中定义附加的参数来指定哪些模块进行预加载,我们使用路由定义中的 data 来提供这个附加的数据。

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

此时,可以看到,模块直接被预加载了。即使您点击链接,也不会再有新的请求发生。

Angular实现预加载延迟模块的示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
js完整倒计时代码分享
Sep 18 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
js实现简易计算器功能
Oct 18 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 #Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 #jQuery
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 #Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 #Javascript
jQuery中 DOM节点操作方法大全
Oct 12 #jQuery
基于es6三点运算符的使用方法(实例讲解)
Oct 12 #Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 #Javascript
You might like
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php实现简单洗牌算法
2013/06/18 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python 基础教程之str和repr的详解
2017/08/20 Python
python代码实现ID3决策树算法
2017/12/20 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python装饰器练习题及答案
2019/11/01 Python
python使用配置文件过程详解
2019/12/28 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
女性时尚在线:IVRose
2019/02/23 全球购物
北京SQL新华信咨询
2016/09/30 面试题
2014春晚主持词
2014/03/25 职场文书
体育专业自荐书
2014/05/29 职场文书
党员自我剖析材料
2014/08/31 职场文书
铣工实训报告
2014/11/05 职场文书
校长新学期寄语2016
2015/12/04 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
浅析NIO系列之TCP
2021/06/15 Java/Android