浅谈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';
exportclassSimpleReuseStrategyimplementsRouteReuseStrategy{
_cacheRouters:{[key:string]:any}={};
shouldDetach(route:ActivatedRouteSnapshot):boolean{
returntrue;
}
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{
returnthis._cacheRouters[route.routeConfig.path].handle;
}
shouldReuseRoute(future:ActivatedRouteSnapshot,curr:ActivatedRouteSnapshot):boolean{
returnfuture.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体验上的问题。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。