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 相关文章推荐
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 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
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
百度地图API使用方法详解
2015/08/25 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
jQuery实现雪花飘落效果
2020/08/02 jQuery
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python表示矩阵的方法分析
2017/05/26 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
信用社竞聘演讲稿
2014/05/16 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2014年导购员工作总结
2014/11/18 职场文书
党员剖析材料范文
2014/12/18 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
2016年春节问候语
2015/11/11 职场文书