angular4 路由重用策略 RouterReuseStrategy
单页面应用现在是主流，随之而来的缺点：页面间切换时不能保存状态
angular4出了一个RouteReuseStrategy路由重用策略可以让组件所有的state和渲染好的html存起来，然后在切回去的时候再调出来。
export declare abstract class RouteReuseStrategy{ abstract shouldReuseRoute():Boolean abstract shouldAttach():Boolean abstract retrieve():DetachedRouteHandle | null abstract shouldDetach():Boolean abstract store():void }
替换一旦发生，某些组件将被丢弃
这时shouldDetech,store将被调用，用于缓存即将被丢弃的组件
有组件丢弃，自然有组件替补进来
这时shouldAttach retreive将被调用，用于调出缓存的组件
🌊 应用场景
1.进入某个路由页面，进行操作，切换页面再返回，能还原到之前的操作状态；
2.切换右边的tab，能进入到对应的路由页面（操作后的状态）；
3.点击右边tab里的关闭按钮或页面上的关闭按钮，删除某个路由页面的快照，再次点开这个路由页面，页面恢复初始状态；
🌊 下面是具体实现
要注意的点：
1. store方法：存储上一个页面的快照
2.关闭路由有几种情况：
i 打开A页面后 打开B页面 关闭B页面（此时B页面没有快照） -> 触发store方法
ii 打开A页面后 打开B页面 关闭A页面 （此时A页面有快照) -> 不触发store方法
iii 打开A页面后 打开B页面 回到A页面 关闭A页面 （此时A页面有快照） ->不触发store方法
iii 打开A页面后 打开B页面 回到A页面 关闭B页面 （此时B页面有快照） ->不触发store方法
因此页面在没有快照的时候关闭 需要在store方法里做一个暂缓删除的操作（先记录key 进去新页面后 再删除key）
这样页面的ngOnDestroy()方法才能执行 才能避免事件重复监听（在ngOnDestroy()中执行）
相关的知识点：
ActivatedRouteSnapshot：包含当前插座中加载组件某一特定时间路由信息
RouteReuseStrategy：路由复用策略
DetachedRouteHandle：组件当前所有状态（路由快照
import {ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle} from '@angular/router;
export class ExtensionRouteReuseStrategy implements RouteReuseStrategy {
private static waitDelete:string;
public static storedRoutes: Map<string, DetachedRouteHandle> = new Map<string, DetachedRouteHandle>();
constructor(){
//关闭操作（右上角或者history页面）
this.storageNotifyRouter.destoryTopic.subscribe((key) => {
this.processDestory(key);
});
};
//是否缓存【离开路由时触发】
shouldDetach(route: ActivatedRouteSnapshot): boolean {
if (route.data && route.data.key) {
return true;
}
return false;
}
//缓存组件【离开路由时触发】
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
const key = this.findStoreKey(route);
const key$$ = this.lastClosedKey + _SPLIT;
//未存储快照的情况下 跳转新页面 再删key
if (this.waitDeleteRoutes.size > 0) {
const array = Array.from(this.waitDeleteRoutes.keys());
for (const deletekey of array) {
if (deletekey == key) {
const oldHandle = handle as { componentRef: ComponentRef<any> };
oldHandle.componentRef.destroy();
}
this.waitDeleteRoutes.delete(deletekey);
}
return;
}
//存储上一个页面快照 进入新页面
if (handle && !(key === this.lastClosedKey || key.startsWith(key$$))) {
this.lastClosedKey = '';
this.storedRoutes.set(key, handle);
}
}
//是否还原【进入路由时触发】
shouldAttach(route: ActivatedRouteSnapshot): boolean {
const key = this.findRetrieveKey(route);
const result: boolean = !!key && !!this.storedRoutes.get(key);
return result;
}
//还原路由【进入路由时触发】
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
const key = this.findRetrieveKey(route);
let handle = null;
if (key && this.storedRoutes.get(key)) {
handle = this.storedRoutes.get(key);
this.routerNotifyStorage.notifyRetrieve(key);
}
return handle;
}
//是否复用路由【进入路由时触发】
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
const result: boolean = future.routeConfig === curr.routeConfig;
return result;
}
findStoreKey(route: ActivatedRouteSnapshot): string {
let key = "";
if (route.data && route.data.key) {
if (route.children[0] && route.children[0].data && route.children[0].data.key) {
this.findStoreKey(route.children[0]);
} else {
key = route.data.key;
}
}
return key;
}
findRetrieveKey(route: ActivatedRouteSnapshot): string {
let key = "";
if (route.data && route.data.key) {
key = route.data.key;
}
return key;
}
processDestory(key: string, waiteDelete: boolean = true) {
this.lastClosedKey = key;
let existKey: boolean = false;
const array: string[] = Array.from(this.storedRoutes.keys());
for (const keyStored of array) {
const key$$ = key + _SPLIT;
//存储快照的情况下 删除快照
if (key === keyStored || keyStored.startsWith(key$$)) {
const oldHandle = this.storedRoutes.get(keyStored) as { componentRef: ComponentRef<any> };
oldHandle.componentRef.destroy();
this.storedRoutes.delete(keyStored);
existKey = true;
}
}
//未存储快照 先存当前页面key
if (!existKey && waiteDelete) {
this.waitDeleteRoutes.add(key);
}
}
}
🌊 后续
保存快照
在离开路由时保存上一个页面快照，并emit一个事件给左边的菜单组件和右边的tab组件，告诉它们路由路径已改变，同时把新的路由路径作为参数传过去
然后在左边的菜单组件和右边的tab组件里subscribe事件里去监听变化，替换新的路由路径。
这样在点击它们的时候就会重定向到新的路由路径，而快照已保存。
删除快照
在点击右边tab组件里的关闭按钮或者点击页面上的关闭按钮时，emit一个删除快照的事件，同时把路由路径作为参数传过去
然后在路由复用策略的ts文件中的subscribe事件里去监听这个事件，然后执行对应路由的processDestroy()方法
