使用 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 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
Jquery插件之多图片异步上传
Oct 20 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
js日期联动示例
May 02 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 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
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
php 中的closure用法详解
2017/06/12 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
python提示No module named images的解决方法
2014/09/29 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
秦兵马俑教学反思
2014/02/07 职场文书
负责人任命书范本
2014/06/04 职场文书
征兵宣传标语
2014/06/20 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
代码解析React中setState同步和异步问题
2021/06/03 Javascript
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android