使用 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 相关文章推荐
理解Javascript_02_理解undefined和null
Oct 11 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
pandas取出重复数据的方法
2019/07/04 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
对python中return与yield的区别详解
2020/03/12 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
京东国际站:JOYBUY
2017/11/23 全球购物
化妆品促销方案
2014/02/24 职场文书
校园文化标语
2014/06/18 职场文书
单位委托书怎么写
2014/09/21 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
英文导游词
2015/02/13 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书