优化逻辑

proxy.conf.json

@@ -1,6 +1,6 @@
 {
   "/service": {
-		"target": "http://192.168.8.108",
+		"target": "http://192.168.3.108",
     "logLevel": "debug",
     "changeOrigin": true,
     "pathRewrite": {
@@ -8,7 +8,7 @@
     }
   },
   "/file": {
-    "target": "http://192.168.8.108",
+    "target": "http://192.168.3.108",
     "logLevel": "debug",
     "changeOrigin": true,
     "pathRewrite": {
@@ -16,7 +16,7 @@
     }
   },
   "/record": {
-    "target": "http://192.168.8.108",
+    "target": "http://192.168.3.108",
     "logLevel": "debug",
     "changeOrigin": true,
     "pathRewrite": {

src/app/SimpleReuseStrategy.ts

@@ -0,0 +1,66 @@
+import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle, UrlSegment } 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 deleteAllRouteCache(): void {
+    SimpleReuseStrategy.cacheRouters.forEach((handle: any, key) => {
+      SimpleReuseStrategy.deleteRouteCache(key);
+    });
+  }
+
+  // one 进入路由触发，是否同一路由时复用路由
+  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+    return future.routeConfig === curr.routeConfig &&
+      JSON.stringify(future.params) === JSON.stringify(curr.params);
+  }
+
+  // 获取存储路由
+  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
+    const url = this.getFullRouteURL(route);
+    if (route.data.reuse && SimpleReuseStrategy.cacheRouters.has(url)) {
+      return SimpleReuseStrategy.cacheRouters.get(url);
+    } else {
+      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);
+  }
+
+  // 获取当前路由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('/')}`;
+
+  }
+  private getRouteUrlPath(route: ActivatedRouteSnapshot) {
+    return route.url.map(urlSegment => urlSegment.path);
+  }
+}

src/app/app.module.ts

@@ -1,4 +1,3 @@
-import { CustomReuseStrategy } from './custom-route-reuse-strategy';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -12,6 +11,7 @@ import { ShareModule } from './share/share.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NZ_I18N, zh_CN, NzConfig, NZ_CONFIG } from 'ng-zorro-antd';
 import { RouteReuseStrategy } from '@angular/router';
+import { SimpleReuseStrategy } from './SimpleReuseStrategy';
 const ngZorroConfig: NzConfig = {
   // 注意组件名称没有 nz 前缀
   notification: { nzTop: 100 }
@@ -34,7 +34,7 @@ registerLocaleData(zh);
     { provide: NZ_CONFIG, useValue: ngZorroConfig },
     { provide: LocationStrategy, useClass: HashLocationStrategy },
     { provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true },
-    { provide: RouteReuseStrategy, useClass: CustomReuseStrategy },
+    { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy },
   ],
   bootstrap: [AppComponent]
 })

src/app/custom-route-reuse-strategy.ts

@@ -1,48 +0,0 @@
-import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
-
-export class CustomReuseStrategy implements RouteReuseStrategy {
-  private storedHandles = new Map<string, DetachedRouteHandle>();
-
-  shouldDetach(route: ActivatedRouteSnapshot): boolean {
-    return route.data.reuse || false;
-  }
-
-  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
-    if (route.data.reuse) {
-      const key = this.getRouteKey(route);
-      this.storedHandles.set(key, handle);
-    }
-  }
-
-  shouldAttach(route: ActivatedRouteSnapshot): boolean {
-    const key = this.getRouteKey(route);
-    // console.log('shouldAttach:', this.storedHandles.has(key))
-    return this.storedHandles.has(key);
-  }
-
-  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
-    const key = this.getRouteKey(route);
-    return this.storedHandles.get(key) || null;
-  }
-
-  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
-    // 精确匹配路由复用
-    return future.routeConfig === curr.routeConfig &&
-           JSON.stringify(future.params) === JSON.stringify(curr.params);
-  }
-
-  private getRouteKey(route: ActivatedRouteSnapshot): string {
-    let str = route.pathFromRoot
-    .filter(v => v.routeConfig)
-    .map(v => v.routeConfig!.path + JSON.stringify(v.params))
-    .join('/');
-    return str.endsWith('/{}') ? str.slice(0, -3) : str;
-  }
-
-  public deleteRouteSnapshot(url: string): void {
-    const key = url.replace(/\//g, '_');
-    if (this.storedHandles.has(key)) {
-      this.storedHandles.delete(key);
-    }
-  }
-}

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

@@ -1,6 +1,8 @@
 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",
   templateUrl: "./maintenance-statistics.component.html",
@@ -11,6 +13,7 @@ export class MaintenanceStatisticsComponent implements OnInit, OnDestroy {
     public tool: ToolService,
     public route: ActivatedRoute,
     public router: Router,
+    public tabService: TabService,
   ) {}
 
   menuList: any[] = [];
@@ -24,6 +27,8 @@ export class MaintenanceStatisticsComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(){
     this.sessionRemove();
+    this.tabService.tabs = [];
+    SimpleReuseStrategy.deleteAllRouteCache();
   }
 
   getMenuList(){
@@ -36,6 +41,8 @@ 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]);
   }
 
@@ -43,8 +50,12 @@ export class MaintenanceStatisticsComponent implements OnInit, OnDestroy {
   activeSecondMenuLink:string;
   clickSecondMenu(data){
     this.activeSecondMenuLink = data.link;
-    // this.router.navigateByUrl(`newStatistics/${this.route.parent.snapshot.routeConfig.path}/${this.activeSecondMenuLink}`).finally();
-    this.router.navigate([`newStatistics/${this.route.parent.snapshot.routeConfig.path}/${this.activeSecondMenuLink}`], { replaceUrl: true });
+    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

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Router, NavigationEnd, ActivatedRouteSnapshot } from '@angular/router';
 import { filter } from 'rxjs/operators';
+import { SimpleReuseStrategy } from 'src/app/SimpleReuseStrategy';
 
 export interface Tab {
   title: string;
@@ -58,6 +59,9 @@ 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;
 
@@ -89,7 +93,7 @@ export class TabService {
         replaceUrl: true
       });
     }
-    return newActiveTab!.path;
+    return newActiveTab.path;
   }
 
   private getTitleFromRoute(route: ActivatedRouteSnapshot): string {
@@ -108,6 +112,12 @@ export class TabService {
     keepTab.active = true;
     this.currentTab = keepTab;
 
+    this.tabs.forEach(v => {
+      if (v.path !== keepTab.path) {
+        SimpleReuseStrategy.deleteRouteCache(v.path);
+      }
+    })
+
     // 触发路由跳转
     this.router.navigate([keepTab.path], {
       replaceUrl: true