页签修复

src/app/SimpleReuseStrategy.ts

@@ -1,66 +1,58 @@
-import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle, UrlSegment } from '@angular/router';
+import {RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle} from '@angular/router';
 
+/**
+ * 路由复用策略
+ */
 export class SimpleReuseStrategy implements RouteReuseStrategy {
-  static cacheRouters = new Map<string, DetachedRouteHandle>();
 
-  public static deleteRouteCache(url): void {
-    if (SimpleReuseStrategy.cacheRouters.has(url)) {
-      const handle: any = SimpleReuseStrategy.cacheRouters.get(url);
-      try {
-        handle.componentRef.destory();
-      } catch (e) { }
-      SimpleReuseStrategy.cacheRouters.delete(url);
-    }
+  public static handlers: { [key: string]: DetachedRouteHandle } = {};
+  private static waitDelete: string;
+
+  /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */
+  public shouldDetach(route: ActivatedRouteSnapshot): boolean {
+    return route.routeConfig && route.routeConfig.data && route.routeConfig.data.reuse === true;
   }
 
-  public static deleteAllRouteCache(): void {
-    SimpleReuseStrategy.cacheRouters.forEach((handle: any, key) => {
-      SimpleReuseStrategy.deleteRouteCache(key);
-    });
+  /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */
+  public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
+    if (SimpleReuseStrategy.waitDelete && SimpleReuseStrategy.waitDelete === this.getRouteUrl(route)) {
+      // 如果待删除是当前路由则不存储快照
+      SimpleReuseStrategy.waitDelete = null;
+      return;
+    }
+    SimpleReuseStrategy.handlers[this.getRouteUrl(route)] = handle;
   }
 
-  // one 进入路由触发，是否同一路由时复用路由
-  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
-    return future.routeConfig === curr.routeConfig &&
-      JSON.stringify(future.params) === JSON.stringify(curr.params);
+  /** 若 path 在缓存中有的都认为允许还原路由 */
+  public shouldAttach(route: ActivatedRouteSnapshot): boolean {
+    return !!SimpleReuseStrategy.handlers[this.getRouteUrl(route)];
   }
 
-  // 获取存储路由
-  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
-    const url = this.getFullRouteURL(route);
-    if (route.data.reuse && SimpleReuseStrategy.cacheRouters.has(url)) {
-      return SimpleReuseStrategy.cacheRouters.get(url);
-    } else {
+  /** 从缓存中获取快照，若无则返回nul */
+  public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
+    if (!route.routeConfig) {
       return null;
     }
-  }
 
-  // 是否允许复用路由
-  shouldDetach(route: ActivatedRouteSnapshot): boolean {
-    return Boolean(route.data.reuse);
-  }
-  // 当路由离开时会触发，存储路由
-  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
-    const url = this.getFullRouteURL(route);
-    SimpleReuseStrategy.cacheRouters.set(url, handle);
-  }
-  //  是否允许还原路由
-  shouldAttach(route: ActivatedRouteSnapshot): boolean {
-    const url = this.getFullRouteURL(route);
-    return Boolean(route.data.reuse) && SimpleReuseStrategy.cacheRouters.has(url);
+    return SimpleReuseStrategy.handlers[this.getRouteUrl(route)];
   }
 
-  // 获取当前路由url
-  private getFullRouteURL(route: ActivatedRouteSnapshot): string {
-    const { pathFromRoot } = route;
-    let fullRouteUrlPath: string[] = [];
-    pathFromRoot.forEach((item: ActivatedRouteSnapshot) => {
-      fullRouteUrlPath = fullRouteUrlPath.concat(this.getRouteUrlPath(item));
-    });
-    return `/${fullRouteUrlPath.join('/')}`;
+  /** 进入路由触发，判断是否同一路由 */
+  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, '_');
   }
-  private getRouteUrlPath(route: ActivatedRouteSnapshot) {
-    return route.url.map(urlSegment => urlSegment.path);
+
+  public static deleteRouteSnapshot(url: string): void {
+    const key = url.replace(/\//g, '_');
+    if (SimpleReuseStrategy.handlers[key]) {
+      delete SimpleReuseStrategy.handlers[key];
+    } else {
+      SimpleReuseStrategy.waitDelete = key;
+    }
   }
 }

src/app/views/new-statistics/maintenance-statistics/maintenance-statistics.component.ts

@@ -1,7 +1,6 @@
 import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit, OnDestroy } from "@angular/core";
 import { ToolService } from 'src/app/services/tool.service';
-import { SimpleReuseStrategy } from '../../../SimpleReuseStrategy';
 import { TabService } from '../services/tab.service';
 @Component({
   selector: "app-maintenance-statistics",
@@ -27,8 +26,7 @@ export class MaintenanceStatisticsComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(){
     this.sessionRemove();
-    this.tabService.tabs = [];
-    SimpleReuseStrategy.deleteAllRouteCache();
+    this.tabService.deleteAllRouteSnapshot();
   }
 
   getMenuList(){
@@ -41,20 +39,23 @@ export class MaintenanceStatisticsComponent implements OnInit, OnDestroy {
   clickMenu(data){
     this.activeMenuId = data.id;
     this.secondMenuList = this.menuList.find(v => v.id == this.activeMenuId).childrens || [];
-    this.tabService.tabs = [];
-    SimpleReuseStrategy.deleteAllRouteCache();
-    this.secondMenuList.length && this.clickSecondMenu(this.secondMenuList[0]);
+    // this.tabService.deleteAllRouteSnapshot();
+    console.log(this.tabService.tabs)
+    let activeTab = this.tabService.tabs.find(v => v.active);
+    // return;
+    if(this.secondMenuList.length){
+      if(activeTab.path === `/newStatistics/${this.route.parent.snapshot.routeConfig.path}/${this.secondMenuList[0].link}`){
+        this.clickSecondMenu(this.secondMenuList[0]);
+      }else{
+        this.activeSecondMenuLink = activeTab.path.split('/').reverse()[0];
+      }
+    }
   }
 
   // 点击二级菜单
   activeSecondMenuLink:string;
   clickSecondMenu(data){
     this.activeSecondMenuLink = data.link;
-    let hasCache = SimpleReuseStrategy.cacheRouters.has(`/newStatistics/${this.route.parent.snapshot.routeConfig.path}/${this.activeSecondMenuLink}`);
-    console.log('tabs', this.tabService.tabs);
-    console.log('cacheRouters', SimpleReuseStrategy.cacheRouters);
-    console.log('cacheRouters', hasCache);
-    !hasCache && SimpleReuseStrategy.deleteRouteCache(`/newStatistics/${this.route.parent.snapshot.routeConfig.path}/${this.activeSecondMenuLink}`);
     this.router.navigate([`/newStatistics/${this.route.parent.snapshot.routeConfig.path}/${this.activeSecondMenuLink}`], { replaceUrl: true });
   }
 

src/app/views/new-statistics/services/tab.service.ts

@@ -19,10 +19,20 @@ export class TabService {
     this.router.events
       .pipe(filter(event => event instanceof NavigationEnd))
       .subscribe((event: NavigationEnd) => {
-        event.urlAfterRedirects.startsWith('/newStatistics/') && this.updateTabs(event.urlAfterRedirects);
+      	console.log('event:', event)
+        if(event.urlAfterRedirects.startsWith('/newStatistics/')){
+          this.updateTabs(event.urlAfterRedirects);
+        }
       });
   }
 
+  public deleteAllRouteSnapshot(){
+    this.tabs.forEach(v => {
+      SimpleReuseStrategy.deleteRouteSnapshot(v.path);
+    })
+    this.tabs = [];
+  }
+
   private updateTabs(url: string) {
     const normalizedUrl = this.getNormalizedUrl(url);
     const existingTab = this.tabs.find(t => t.path === normalizedUrl);
@@ -60,7 +70,6 @@ export class TabService {
 
   closeTab(path: string): any {
     console.log('path:', path)
-    SimpleReuseStrategy.deleteRouteCache(path);
 
     const index = this.tabs.findIndex(t => t.path === path);
     if (index === -1) return;
@@ -84,6 +93,7 @@ export class TabService {
 
     // 执行删除
     this.tabs.splice(index, 1);
+    SimpleReuseStrategy.deleteRouteSnapshot(path);
 
     // 设置新激活页签
     if (newActiveTab) {
@@ -108,16 +118,16 @@ export class TabService {
 
   closeOtherTabs(keepTab: Tab): void {
     // 强制激活当前右键页签
-    this.tabs = this.tabs.filter(t => t.path === keepTab.path);
-    keepTab.active = true;
-    this.currentTab = keepTab;
-
     this.tabs.forEach(v => {
       if (v.path !== keepTab.path) {
-        SimpleReuseStrategy.deleteRouteCache(v.path);
+        SimpleReuseStrategy.deleteRouteSnapshot(v.path);
       }
     })
 
+    this.tabs = this.tabs.filter(t => t.path === keepTab.path);
+    keepTab.active = true;
+    this.currentTab = keepTab;
+
     // 触发路由跳转
     this.router.navigate([keepTab.path], {
       replaceUrl: true