浅谈Angular路由复用策略

一、引言

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

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

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体验上的问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Angular路由复用 # Angularjs制作简单的路由功能demo # AngularJS 路由详解和简单实例 # AngularJS路由实现页面跳转实例 # Angular 4.x 路由快速入门学习 # angular.js 路由及页面传参示例 # 使用AngularJS对路由进行安全性处理的方法 # 详解angular2实现ng2-router 路由和嵌套路由 # AngularJS监听路由的变化示例代码 # angular中使用路由和$location切换视图 # AngularJS 路由和模板实例及路由地址简化方法(必看) # 关键词 # 复用 # 这是 # 搜索结果 # 是一个 # 这一 # 让人 # 就像 # 下一页 # 就不 # 一切都 # 并在 # 抛砖引玉 # 这部 # 有兴趣 # 几种 # 自定义 # 只需要 # 不死 # 跳转

返回目录在线咨询

上一篇：如何制定关键词策略_SEO优化教程
下一篇：C++怎么使用智能指针shared_ptr_C++现代内存管理与shared_ptr原理剖析

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

浅谈Angular路由复用策略

您的项目需求