浅谈Angular路由复用策略


Posted in Javascript onOctober 04, 2017

一、引言

路由在执行过程中对组件无状态操作,即路由离退时组件状态也一并被删除;当然在绝大多数场景下这是合理的。

但有时一些特殊需求会让人半死亡状态,当然这一切都是为了用户体验;一种非常常见场景,在移动端中用户通过关键词搜索商品,而死不死的这样的列表通常都会是自动下一页动作,此时用户好不容易滚动到第二页并找到想要看的商品时,路由至商品详情页,然后一个后退……用户懵逼了。

Angular路由与组件一开始就透过 RouterModule.forRoot 形成一种关系,当路由命中时利用ComponentFactoryResolver 构建组件,这是路由的本质。

而每一个路由并不一定是一次性消费,Angular 利用 RouteReuseStrategy 贯穿路由状态并决定构建组件的方式;当然默认情况下(DefaultRouteReuseStrategy)像开头说的,一切都不进行任何处理。

RouteReuseStrategy 从2就已经是实验性,当前依然如此,这么久应该是可信任。

二、RouteReuseStrategy

RouteReuseStrategy 我称它为:路由复用策略;并不复杂,提供了几种办法通俗易懂的方法:

  • shouldDetach 是否允许复用路由
  • store 当路由离开时会触发,存储路由
  • shouldAttach 是否允许还原路由
  • retrieve 获取存储路由
  • shouldReuseRoute 进入路由触发,是否同一路由时复用路由

这看起来就像是一个时间轴关系,用一种白话文像是这样:把路由 /list 设置为允许复用(shouldDetach),然后将路由快照存在 store 当中;当 shouldReuseRoute 成立时即:再次遇到 /list 路由后表示需要复用路由,先判断 shouldAttach 是否允许还原,最后从 retrieve 拿到路由快照并构建组件。

当理解这一原理时,假如我们拿开头搜索列表返回的问题就变得非常容易解决。

三、一个示例

诚如上面说明的,只需要实现 RouteReuseStrategy 接口即可自定义一个路由利用策略。

1、创建策略

import {RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle} from '@angular/router';

export class SimpleReuseStrategy implements RouteReuseStrategy {

  _cacheRouters: { [key: string]: any } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return true;
  }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this._cacheRouters[route.routeConfig.path] = {
      snapshot: route,
      handle: handle
    };
  }
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!this._cacheRouters[route.routeConfig.path];
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this._cacheRouters[route.routeConfig.path].handle;
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

定义一个 _cacheRouters 用于缓存数据(路由快照及当前组件实例对象)。

  • shouldDetach 直接返回 true 表示对所有路由允许复用
  • store 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象;path等同RouterModule.forRoot中的配置。
  • shouldAttach 若 path 在缓存中有的都认为允许还原路由
  • retrieve 从缓存中获取快照,若无则返回null
  • shouldReuseRoute 进入路由触发,判断是否同一路由

2、注册

最后将策略注册到模块当中:

providers: [
 { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy }
]

假设我们有这么一个路由配置:

RouterModule.forRoot([
 { path: 'search', component: SearchComponent },
 { path: 'edit/:id', component: EditComponent }
])

搜索组件用于搜索动作,并在根据搜索结果跳转至编辑页,保存后又回到最后搜索结果的状态(这部分代码我就不贴有兴趣见 plnkr)。

四、结论

上述只是一个简单的抛砖引玉作用,实则对于复用的判断会更复杂、滚动条位置、缓存清理等等。

善用这种路由复用策略机制可以解决很多Web体验上的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
React-Native之定时器Timer的实现代码
Oct 04 #Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 #Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 #Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 #Javascript
原生js封装运动框架的示例讲解
Oct 01 #Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 #Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 #Javascript
You might like
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
javascript如何实现create方法
2019/11/04 Javascript
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
管理站站长岗位职责
2013/11/27 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
会计学生自我鉴定
2014/02/06 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
李强优秀员工观后感
2015/06/16 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
Go语言编译原理之变量捕获
2022/08/05 Golang