使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码


Posted in Javascript onNovember 01, 2019

使用 Angular RouteReuseStrategy 缓存组件

Cache components with Angular RouteReuseStrategy

RouteReuseStrategy provider 允许我们控制 Angular 路由和组件生命周期的行为。

当我们在组件间切换的时候,Angular都会销毁上一个组件,并且创建一个新的组件。在大多数情况下,我们可能不想让它这样工作,因为每次加载一个组件,可能会有很多类似HTTP请求一样的昂贵的操作。

这时候就需要RouteReuseStrategy了。

RouteReuseStrategy是什么

RouteReuseStrategy接口声明了5个方法。

shouldReuseRoute

这个方法每次切换路由时都会被调用。future参数是将要离开的路由,curr参数是将要加载的路由。如果这个方法返回true,路由将不会跳转(意味着路由没有发生变化)。如果它返回false,则路由发生变化并且其余方法会被调用。

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
  // 默认行为
  return future.routeConfig === curr.routeConfig;
}

shouldAttach

路由刚刚被打开,当我们加载到这个路由的组件上时,shouldAttach会被调用。一旦组件被加载这个方法都会被调用。如果这个方法返回trueretrieve方法将会被调用。否则这个组件将会被重新创建。

shouldAttach(route: ActivatedRouteSnapshot): boolean;

retrieve

shouldAttach方法返回true时这个方法会被调用。提供当前路由的参数(刚打开的路由),并且返回一个缓存的RouteHandle。如果返回null表示没有效果。我们可以使用这个方法手动获取任何已被缓存的RouteHandle。框架不会自动管理它,需要我们手动实现。

retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null;

shouldDetach

当离开当前路由时这个方法会被调用。如果返回truestore方法会被调用。

shouldDetach(route: ActivatedRouteSnapshot): boolean;

store

这个方法当且仅当shouldDetach方法返回true时被调用。我们可以在这里具体实现如何缓存RouteHandle。在这个方法中缓存的内容将会被用在retrieve方法中。它提供了我们离开的路由和RouteHandle

store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void;

示例

src/services/route-strategy.service.ts

 

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';
export class RouteStrategyService implements RouteReuseStrategy {
 public static handlers: { [key: string]: DetachedRouteHandle } = {};
 public static deleteRouteSnapshot(path: string): void {
  const name = path.replace(/\//g, '_');
  if (RouteStrategyService.handlers[name]) {
   delete RouteStrategyService.handlers[name];
  }
 }
 /**
  * 判断当前路由是否需要缓存
  * 这个方法返回false时则路由发生变化并且其余方法会被调用
  * @param {ActivatedRouteSnapshot} future
  * @param {ActivatedRouteSnapshot} curr
  * @returns {boolean}
  * @memberof CacheRouteReuseStrategy
  */
 public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
  return future.routeConfig === curr.routeConfig
   && JSON.stringify(future.params) === JSON.stringify(curr.params);
 }
 /**
  * 当离开当前路由时这个方法会被调用
  * 如果返回 true 则 store 方法会被调用
  * @param {ActivatedRouteSnapshot} route
  * @returns {boolean}
  * @memberof CacheRouteReuseStrategy
  */
 public shouldDetach(route: ActivatedRouteSnapshot): boolean {
  return true;
 }
 /**
  * 将路由写入缓存
  * 在这里具体实现如何缓存 RouteHandle
  * 提供了我们离开的路由和 RouteHandle
  * @param {ActivatedRouteSnapshot} route
  * @param {DetachedRouteHandle} detachedTree
  * @memberof CacheRouteReuseStrategy
  */
 public store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {
  RouteStrategyService.handlers[this.getPath(route)] = detachedTree;
 }
 /**
  * 路由被导航 如果此方法返回 true 则触发 retrieve 方法
  * 如果返回 false 这个组件将会被重新创建
  * @param {ActivatedRouteSnapshot} route
  * @returns {boolean}
  * @memberof CacheRouteReuseStrategy
  */
 public shouldAttach(route: ActivatedRouteSnapshot): boolean {
  return !!RouteStrategyService.handlers[this.getPath(route)];
 }
 /**
  * 从缓存读取cached route
  * 提供当前路由的参数(刚打开的路由),并且返回一个缓存的 RouteHandle
  * 可以使用这个方法手动获取任何已被缓存的 RouteHandle
  * @param {ActivatedRouteSnapshot} route
  * @returns {(DetachedRouteHandle | null)}
  * @memberof CacheRouteReuseStrategy
  */
 public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
  return RouteStrategyService.handlers[this.getPath(route)] || null;
 }
 private getPath(route: ActivatedRouteSnapshot): string {
  // tslint:disable-next-line: no-string-literal
  const path = route['_routerState'].url.replace(/\//g, '_');
  return path;
 }
}

src/app/app.module.ts:

import { RouteReuseStrategy } from '@angular/router';
import { RouteStrategyService } from '../services/route-strategy.service';

@NgModule({
  ...
  providers: [
    ...
    { provide: RouteReuseStrategy, useClass: RouteStrategyService }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

以上示例运行时会缓存所有路由组件。

实现比如标签页效果时,关闭标签页,调用RouteStrategyService中的deleteRouteSnapshot方法删除已缓存的页面即可。

这里可能会有个问题,如果你不想用这个路由缓存了,请务必删除掉app.module.ts中的providers,而不是将RouteStrategyService的shouldReuseRoute始终return true;这样会出现路由跳转页面不跳转的问题,原因暂时未知。

以下是运行效果图:

使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码

The end...
Last updated by Jehorn, 11/1/2019

总结

以上所述是小编给大家介绍的使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
再谈javascript原型继承
Nov 10 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
layui使用label标签的方法
Sep 14 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 Javascript
vue实现计步器功能
Nov 01 #Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 #Javascript
js canvas实现星空连线背景特效
Nov 01 #Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 #jQuery
微信小程序定义和调用全局变量globalData的实现
Nov 01 #Javascript
vue-router 中 meta的用法详解
Nov 01 #Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 #Javascript
You might like
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
使用Python监控文件内容变化代码实例
2018/06/04 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Python高斯消除矩阵
2019/01/02 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
客服主管岗位职责
2013/12/13 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
五好党支部事迹材料
2014/02/06 职场文书
设计大赛策划方案
2014/06/13 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
党小组考察意见
2015/06/02 职场文书
小学运动会加油稿
2015/07/22 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
python cv2图像质量压缩的算法示例
2021/06/04 Python
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
Python字符串格式化方式
2022/04/07 Python
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang