浅谈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 相关文章推荐
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
原生js实现照片墙效果
Oct 13 Javascript
JS实现购物车基本功能
Nov 08 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 Javascript
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 获取远程文件内容的函数代码
2010/03/24 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
php实现的操作excel类详解
2016/01/15 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
python开发之thread线程基础实例入门
2015/11/11 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
冰淇淋开店创业计划书
2014/02/01 职场文书
小学教师听课制度
2014/02/01 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
《学会合作》教学反思
2014/04/12 职场文书
《春雨》教学反思
2014/04/24 职场文书
生活部的活动方案
2014/08/19 职场文书
最美护士演讲稿
2014/08/27 职场文书
聘任书的格式及模板
2019/10/28 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
php双向队列实例讲解
2021/11/17 PHP
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技