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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
Jquery倒计时源码分享
May 16 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
jQuery MD5加密实现代码
2010/03/15 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
十八大闭幕感言
2014/01/22 职场文书
个人作风剖析材料
2014/02/02 职场文书
法人委托书的范本格式
2014/09/11 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
甲午大海战观后感
2015/06/02 职场文书
爱的教育读书笔记
2015/06/26 职场文书
教师节获奖感言
2015/07/31 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js