import { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';export class SimpleReuseStrategy implements RouteReuseStrategy {public static handlers: { [key: string]: DetachedRouteHandle } = {}/** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */public shouldDetach(route: ActivatedRouteSnapshot): boolean {return true;}/** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {SimpleReuseStrategy.handlers[route.routeConfig.path] = handle}/** 若 path 在缓存中有的都认为允许还原路由 */public shouldAttach(route: ActivatedRouteSnapshot): boolean {return !!route.routeConfig && !!SimpleReuseStrategy.handlers[route.routeConfig.path]}/** 从缓存中获取快照，若无则返回nul */public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {if (!route.routeConfig) {return null}return SimpleReuseStrategy.handlers[route.routeConfig.path]}/** 进入路由触发，判断是否同一路由 */public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {return future.routeConfig === curr.routeConfig}
}

export class AppComponent {//路由列表menuList: Array<{ title: string, module: string, power: string,isSelect:boolean }>=[];constructor(private router: Router,private activatedRoute: ActivatedRoute,private titleService: Title) {//路由事件this.router.events.filter(event => event instanceof NavigationEnd).map(() => this.activatedRoute).map(route => {while (route.firstChild) route = route.firstChild;return route;}).filter(route => route.outlet === 'primary').mergeMap(route => route.data).subscribe((event) => {//路由data的标题let title = event['title'];this.menuList.forEach(p => p.isSelect=false);var menu = { title: title, module: event["module"], power: event["power"], isSelect:true};this.titleService.setTitle(title);let exitMenu=this.menuList.find(info=>info.title==title);if(exitMenu){//如果存在不添加，当前表示选中this.menuList.forEach(p => p.isSelect=p.title==title);return ;} this.menuList.push(menu);});}//关闭选项标签closeUrl(module:string,isSelect:boolean){//当前关闭的是第几个路由let index=this.menuList.findIndex(p=>p.module==module);//如果只有一个不可以关闭if(this.menuList.length==1) return ;this.menuList=this.menuList.filter(p=>p.module!=module);//删除复用delete SimpleReuseStrategy.handlers[module];if(!isSelect) return;//显示上一个选中let menu=this.menuList[index-1];if(!menu) {//如果上一个没有下一个选中menu=this.menuList[index+1];}// console.log(menu);// console.log(this.menuList);this.menuList.forEach(p => p.isSelect=p.module==menu.module );//显示当前路由信息this.router.navigate(['/'+menu.module]);}
}

private getRouteUrl(route: ActivatedRouteSnapshot){return route['_routerState'].url.replace(/\//g,'_')
}

/** 进入路由触发，判断是否同一路由 */
public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {return future.routeConfig === curr.routeConfig
}

/** 进入路由触发，判断是否同一路由 */public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {        return future.routeConfig===curr.routeConfig && JSON.stringify(future.params)==JSON.stringify(curr.params);}

import { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';export class SimpleReuseStrategy implements RouteReuseStrategy {public static handlers: { [key: string]: DetachedRouteHandle } = {}private static waitDelete:string/** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */public shouldDetach(route: ActivatedRouteSnapshot): boolean {return true;}/** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {if(SimpleReuseStrategy.waitDelete && SimpleReuseStrategy.waitDelete==this.getRouteUrl(route)){//如果待删除是当前路由则不存储快照SimpleReuseStrategy.waitDelete=nullreturn;}SimpleReuseStrategy.handlers[this.getRouteUrl(route)] = handle}/** 若 path 在缓存中有的都认为允许还原路由 */public shouldAttach(route: ActivatedRouteSnapshot): boolean {return !!SimpleReuseStrategy.handlers[this.getRouteUrl(route)]}/** 从缓存中获取快照，若无则返回nul */public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {if (!route.routeConfig) {return null}return SimpleReuseStrategy.handlers[this.getRouteUrl(route)]}/** 进入路由触发，判断是否同一路由 */public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {        return future.routeConfig===curr.routeConfig && JSON.stringify(future.params)==JSON.stringify(curr.params);}private getRouteUrl(route: ActivatedRouteSnapshot){return route['_routerState'].url.replace(/\//g,'_')}

    public static deleteRouteSnapshot(name:string):void{if(SimpleReuseStrategy.handlers[name]){delete SimpleReuseStrategy.handlers[name];}else{SimpleReuseStrategy.waitDelete=name;}}
}