一、引言
路由在执行过程中对组件无状态操作,即路由离退时组件状态也一并被删除;当然在绝大多数场景下这是合理的。
但有时一些特殊需求会让人半死亡状态,当然这一切都是为了用户体验;一种非常常见场景,在移动端中用户通过关键词搜索商品,而死不死的这样的列表通常都会是自动下一页动作,此时用户好不容易滚动到第二页并找到想要看的商品时,路由至商品详情页,然后一个后退……用户懵逼了。
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体验上的问题。
Happy coding!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。