RouteReuseStrategy 我称它为：路由复用策略；并不复杂，提供了几种办法通俗易懂的方法：
shouldDetach 是否允许复用路由
store 当路由离开时会触发，存储路由
shouldAttach 是否允许还原路由
retrieve 获取存储路由
shouldReuseRoute 进入路由触发，是否同一路由时复用路由
这看起来就像是一个时间轴关系，用一种白话文像是这样：把路由 /list 设置为允许复用（shouldDetach），然后将路由快照存在 store 当中；当 shouldReuseRoute 成立时即：再次遇到 /list 路由后表示需要复用路由，先判断 shouldAttach 是否允许还原，最后从 retrieve 拿到路由快照并构建组件。
当理解这一原理时，假如我们拿开头搜索列表返回的问题就变得非常容易解决。
诚如上面说明的，只需要实现 RouteReuseStrategy 接口即可自定义一个路由利用策略。
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 进入路由触发，判断是否同一路由
最后将策略注册到模块当中：
providers: [
{ provide: RouteReuseStrategy, useClass: SimpleReuseStrategy }
]假设我们有这么一个路由配置：
RouterModule.forRoot([
{ path: 'search', component: SearchComponent },
{ path: 'edit/:id', component: EditComponent }
])搜索组件用于搜索动作，并在根据搜索结果跳转至编辑页，保存后又回到最后搜索结果的状态（这部分代码我就不贴有兴趣见 plnkr）。
上述只是一个简单的抛砖引玉作用，实则对于复用的判断会更复杂、滚动条位置、缓存清理等等。
善用这种路由复用策略机制可以解决很多Web体验上的问题。
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
