[新增]路由缓存

src/app/CustomReuseStrategy.ts

@@ -1,7 +1,10 @@
-import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
+import {
+  RouteReuseStrategy,
+  ActivatedRouteSnapshot,
+  DetachedRouteHandle,
+} from '@angular/router';
 
 export class CustomReuseStrategy implements RouteReuseStrategy {
-
   public static handlers: { [key: string]: DetachedRouteHandle } = {};
 
   /** 删除缓存路由快照的方法 */
@@ -12,6 +15,18 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
     }
   }
 
+  /** 进入路由触发，判断是否同一路由 */
+  shouldReuseRoute(
+    future: ActivatedRouteSnapshot,
+    curr: ActivatedRouteSnapshot
+  ): boolean {
+    // console.debug('shouldReuseRoute======>', future, curr);
+    return (
+      future.routeConfig === curr.routeConfig &&
+      JSON.stringify(future.params) === JSON.stringify(curr.params)
+    );
+  }
+
   /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */
   shouldDetach(route: ActivatedRouteSnapshot): boolean {
     console.log('shouldDetach======>', route);
@@ -38,21 +53,12 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
     if (!CustomReuseStrategy.handlers[this.getRouteUrl(route)]) {
       return null;
     }
-
     return CustomReuseStrategy.handlers[this.getRouteUrl(route)];
   }
 
-    /** 进入路由触发，判断是否同一路由 */
-    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
-        // console.debug('shouldReuseRoute======>', future, curr);
-        return future.routeConfig === curr.routeConfig &&
-            JSON.stringify(future.params) === JSON.stringify(curr.params);
-    }
-
   /** 使用route的path作为快照的key */
   getRouteUrl(route: ActivatedRouteSnapshot) {
     const path = route['_routerState'].url.replace(/\//g, '_');
     return path;
   }
-
 }

src/app/app.module.ts

@@ -6,8 +6,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { PagesModule } from './pages/pages.module';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
-import { httpInterceptorProviders } from './http-interceptors/index'
+import { httpInterceptorProviders } from './http-interceptors/index';
-import { CacheTokenService } from './service/cache-token.service'
+import { CacheTokenService } from './service/cache-token.service';
 import { NzNotificationModule } from 'ng-zorro-antd/notification';
 import { NzMessageModule } from 'ng-zorro-antd/message';
 import { TreeService } from './service/tree.service';
@@ -15,9 +15,7 @@ import { RouteReuseStrategy } from '@angular/router';
 import { CustomReuseStrategy } from './CustomReuseStrategy';
 import { ConfigFormDataService } from './service/configFormData.service';
 @NgModule({
-  declarations: [
+  declarations: [AppComponent],
-    AppComponent
-  ],
   imports: [
     BrowserModule,
     AppRoutingModule,
@@ -26,9 +24,18 @@ import { ConfigFormDataService } from './service/configFormData.service';
     FormsModule,
     HttpClientModule,
     NzNotificationModule,
-    NzMessageModule
+    NzMessageModule,
+  ],
+  providers: [
+    httpInterceptorProviders,
+    CacheTokenService,
+    TreeService,
+    ConfigFormDataService,
+    {
+      provide: RouteReuseStrategy,
+      useClass: CustomReuseStrategy,
+    },
   ],
-  providers: [httpInterceptorProviders, CacheTokenService, TreeService, ConfigFormDataService],
+  bootstrap: [AppComponent],
-  bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.ts

@@ -1,70 +1,100 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  AfterViewInit,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import { TreeService } from 'src/app/service/tree.service';
-import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
+import {
+  NzFormatEmitEvent,
+  NzTreeComponent,
+  NzTreeNodeOptions,
+} from 'ng-zorro-antd/tree';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { AddhostComponent } from './addhost/addhost.component';
 import { EdithostComponent } from './edithost/edithost.component';
-import { Router } from '@angular/router';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
 @Component({
   selector: 'app-analysis-of-the-host',
   templateUrl: './analysis-of-the-host.component.html',
-  styleUrls: ['./analysis-of-the-host.component.scss']
+  styleUrls: ['./analysis-of-the-host.component.scss'],
 })
 export class AnalysisOfTheHostComponent implements OnInit {
+  constructor(
+    private router: Router,
+    private fb: FormBuilder,
+    private http: HttpClient,
+    private toTree: TreeService,
+    private modal: NzModalService,
+    private message: NzMessageService,
+    private viewContainerRef: ViewContainerRef
+  ) {
+    router.events
+      .pipe(filter((e) => e instanceof NavigationEnd))
+      .subscribe((e) => {
+
+        if(this.selectedOilStation && this.selectedOilStation.id){
+          this.getHost();
+        }
 
-  constructor(private router: Router, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService, private modal: NzModalService, private message: NzMessageService, private viewContainerRef: ViewContainerRef) { }
+      });
+  }
   ngOnInit(): void {
-    this.getAllOrganization()
+    this.getAllOrganization();
   }
 
-
   //获取所有组织机构
   searchValue = '';
   nzExpandAll = false;
-  totalCount: string
+  totalCount: string;
 
   getAllOrganization() {
     let params = {
       ContainsChildren: true,
-      PageSize: 9999
+      PageSize: 9999,
-    }
+    };
-    this.http.get('/api/Organizations', {
+    this.http
-      params: params
+      .get('/api/Organizations', {
-    }).subscribe((data: any) => {
+        params: params,
-      this.totalCount = data.totalCount
+      })
-      console.log(data.items)
+      .subscribe((data: any) => {
-      data.items.forEach(element => {
+        this.totalCount = data.totalCount;
-        element.key = element.id
+        console.log(data.items);
-        element.title = element.name
+        data.items.forEach((element) => {
-        element.selectable = false
+          element.key = element.id;
+          element.title = element.name;
+          element.selectable = false;
           if (element.isGasStation) {
-          element.isLeaf = true
+            element.isLeaf = true;
           }
         });
-      this.nodes = [...this.toTree.toTree(data.items)]
+        this.nodes = [...this.toTree.toTree(data.items)];
-      this.defaultExpandedKeys = [this.nodes[0].id]
+        this.defaultExpandedKeys = [this.nodes[0].id];
-      this.defaultExpandedKeys = [...this.defaultExpandedKeys]
+        this.defaultExpandedKeys = [...this.defaultExpandedKeys];
-    })
+      });
   }
 
-
+  @ViewChild('nzTreeComponent', { static: false })
-  @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
+  nzTreeComponent!: NzTreeComponent;
 
   defaultExpandedKeys = [];
 
-  nodes: any[] = []
+  nodes: any[] = [];
-  nzSelectedKeys: any[] = []
+  nzSelectedKeys: any[] = [];
-  selectedOilStation: any
+  selectedOilStation: any;
   nzClick(event: NzFormatEmitEvent): void {
-    if (event.node.origin['isGasStation']) {//如果点击的是加油站才生效
+    if (event.node.origin['isGasStation']) {
-      this.nzSelectedKeys[0] = event.node.origin.id
+      //如果点击的是加油站才生效
-      this.nzSelectedKeys = [...this.nzSelectedKeys]
+      this.nzSelectedKeys[0] = event.node.origin.id;
-      this.selectedOilStation = event.node.origin
+      this.nzSelectedKeys = [...this.nzSelectedKeys];
-      console.log(this.selectedOilStation)
+      this.selectedOilStation = event.node.origin;
-      this.getHost()
+      console.log(this.selectedOilStation);
+      this.getHost();
     } else {
       this.message.info('只有加油站才可以增加主机');
     }
@@ -72,30 +102,29 @@ export class AnalysisOfTheHostComponent implements OnInit {
 
   //获得加油站的主机
   listOfData: any[] = [];
-  isLoading = false
+  isLoading = false;
   getHost() {
-    this.isLoading = true
+    this.isLoading = true;
-    this.http.get('/api/EdgeDevices', {
+    this.http
+      .get('/api/EdgeDevices', {
         params: {
           ContainsChildren: true,
           OrganizationId: this.selectedOilStation.id,
-        PageSize: 999
+          PageSize: 999,
-      }
+        },
-    }).subscribe((data: any) => {
-      console.log('主机列表', data.items)
-      this.isLoading = false
-      this.listOfData = data.items
       })
+      .subscribe((data: any) => {
+        console.log('主机列表', data.items);
+        this.isLoading = false;
+        this.listOfData = data.items;
+      });
   }
 
-
+  ngAfterViewInit(): void {}
-  ngAfterViewInit(): void {
-
-  }
 
   //新增边缘盒子
   addHost() {
-    console.log(this.selectedOilStation)
+    console.log(this.selectedOilStation);
     const modal = this.modal.create({
       nzTitle: '新增边缘盒子',
       nzContent: AddhostComponent,
@@ -104,92 +133,97 @@ export class AnalysisOfTheHostComponent implements OnInit {
       nzComponentParams: {},
       nzOnOk: async () => {
         if (instance.validateForm.valid) {
-          await new Promise(resolve => {
+          await new Promise((resolve) => {
-            console.log('表单信息', instance.validateForm)
+            console.log('表单信息', instance.validateForm);
             let body = {
               hostIPAddress: instance.validateForm.value.ip,
-              OrganizationId: this.selectedOilStation.id
+              OrganizationId: this.selectedOilStation.id,
-            }
+            };
-            this.http.post('/api/EdgeDevices', body).subscribe(data => {
+            this.http.post('/api/EdgeDevices', body).subscribe((data) => {
-              resolve(data)
+              resolve(data);
               this.message.create('success', '创建成功！');
-              this.getHost()
+              this.getHost();
-              return true
+              return true;
-            })
+            });
-          })
+          });
         } else {
           this.message.create('warning', '请填写完整！');
-          return false
+          return false;
-        }
         }
+      },
     });
     const instance = modal.getContentComponent();
   }
 
   edit(data) {
-    console.log(data)
+    console.log(data);
     const modal = this.modal.create({
       nzTitle: '编辑边缘盒子',
       nzContent: EdithostComponent,
       nzViewContainerRef: this.viewContainerRef,
       nzWidth: 288,
       nzComponentParams: {
-        ip: data.hostIPAddress
+        ip: data.hostIPAddress,
       },
       nzOnOk: async () => {
         if (instance.validateForm.valid) {
-          await new Promise(resolve => {
+          await new Promise((resolve) => {
-            console.log('表单信息', instance.validateForm)
+            console.log('表单信息', instance.validateForm);
-            data.hostIPAddress = instance.validateForm.value.ip,
+            (data.hostIPAddress = instance.validateForm.value.ip),
-              this.http.put(`/api/EdgeDevices/${data.id}`, data).subscribe(data => {
+              this.http
-                resolve(data)
+                .put(`/api/EdgeDevices/${data.id}`, data)
+                .subscribe((data) => {
+                  resolve(data);
                   this.message.create('success', '修改成功！');
-                this.getHost()
+                  this.getHost();
-                return true
+                  return true;
-              })
+                });
-          })
+          });
         } else {
           this.message.create('warning', '请填写完整！');
-          return false
+          return false;
-        }
         }
+      },
     });
     const instance = modal.getContentComponent();
   }
 
   delete(item) {
-    console.log(item)
+    console.log(item);
     this.modal.confirm({
       nzTitle: `确定要删除${item.name}这个主机吗?`,
       nzOkText: '确定',
       nzOkType: 'primary',
       nzOnOk: () => {
-        this.http.delete(`/api/EdgeDevices/${item.id}`).subscribe(data => {
+        this.http.delete(`/api/EdgeDevices/${item.id}`).subscribe((data) => {
           this.message.create('success', '删除成功！');
-          this.getHost()
+          this.getHost();
-        })
+        });
       },
-      nzCancelText: '取消'
+      nzCancelText: '取消',
     });
   }
 
   config(data) {
-    this.router.navigate([`/system/host/camera`], { queryParams: { 'hostId': data.id, 'orId': this.selectedOilStation.id } })
+    this.router.navigate([`/system/host/camera`], {
+      queryParams: { hostId: data.id, orId: this.selectedOilStation.id },
+    });
   }
 
-
   download(data) {
-    console.log(data)
+    console.log(data);
     let params = {
-      edgeDeviceId: data.id
+      edgeDeviceId: data.id,
-    }
+    };
     const httpOptions = {
       responseType: 'blob' as 'json',
-      params: params
+      params: params,
     };
-    this.http.get(`/api/EdgeDevices/IdentityDigest/File`, httpOptions).subscribe({
+    this.http
+      .get(`/api/EdgeDevices/IdentityDigest/File`, httpOptions)
+      .subscribe({
         next: (data: any) => {
-        console.log('文件', data)
+          console.log('文件', data);
           // 文件名中有中文 则对文件名进行转码
           const link = document.createElement('a');
           const blob = new Blob([data], { type: 'application/octet-stream' });
@@ -201,8 +235,8 @@ export class AnalysisOfTheHostComponent implements OnInit {
           document.body.removeChild(link);
         },
         error: (err) => {
-        console.log(err)
+          console.log(err);
-      }
+        },
-    })
+      });
   }
 }

src/app/system-management/organization/organization.component.ts

@@ -27,7 +27,7 @@ export class OrganizationComponent implements OnInit {
     });
     this.getAllOrganization()
 
-    this.deleteRouteSnapshot();
+    // this.deleteRouteSnapshot();
   }
   deleteRouteSnapshot() {
     CustomReuseStrategy.deleteRouteSnapshot('/system/host');