使用 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 相关文章推荐
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
js 动态校验开始结束时间的实现代码
May 25 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
php相当简单的分页类
2008/10/02 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
Python代码的打包与发布详解
2014/07/30 Python
python提示No module named images的解决方法
2014/09/29 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python使用MONGODB入门实例
2015/05/11 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
python实现彩色图转换成灰度图
2019/01/15 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
应届生护士求职信
2013/11/01 职场文书
建筑工地宣传标语
2014/06/18 职场文书
小学生毕业评语
2014/12/26 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
办公室管理规章制度
2015/08/04 职场文书
导游词之镜泊湖
2019/12/09 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers