[新增]路由缓存

src/app/CustomReuseStrategy.ts

@@ -1,58 +1,64 @@
-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 } = {};
 
-    public static handlers: { [key: string]: DetachedRouteHandle } = {};
-
-    /** 删除缓存路由快照的方法 */
-    public static deleteRouteSnapshot(path: string): void {
-        const name = path.replace(/\//g, '_');
-        if (CustomReuseStrategy.handlers[name]) {
-            delete CustomReuseStrategy.handlers[name];
-        }
+  /** 删除缓存路由快照的方法 */
+  public static deleteRouteSnapshot(path: string): void {
+    const name = path.replace(/\//g, '_');
+    if (CustomReuseStrategy.handlers[name]) {
+      delete CustomReuseStrategy.handlers[name];
     }
+  }
 
-    /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */
-    shouldDetach(route: ActivatedRouteSnapshot): boolean {
-        console.log('shouldDetach======>', route);
-        return true;
-    }
+  /** 进入路由触发，判断是否同一路由 */
+  shouldReuseRoute(
+    future: ActivatedRouteSnapshot,
+    curr: ActivatedRouteSnapshot
+  ): boolean {
+    // console.debug('shouldReuseRoute======>', future, curr);
+    return (
+      future.routeConfig === curr.routeConfig &&
+      JSON.stringify(future.params) === JSON.stringify(curr.params)
+    );
+  }
 
-    /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */
-    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
-        console.log('store======>', route, handle);
-        if(route.routeConfig.path == 'host'){
-            CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle;
-        }
-    }
+  /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */
+  shouldDetach(route: ActivatedRouteSnapshot): boolean {
+    console.log('shouldDetach======>', route);
+    return true;
+  }
 
-    /** 若 path 在缓存中有的都认为允许还原路由 */
-    shouldAttach(route: ActivatedRouteSnapshot): boolean {
-        // console.debug('shouldAttach======>', route);
-        return !!CustomReuseStrategy.handlers[this.getRouteUrl(route)];
+  /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */
+  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
+    console.log('store======>', route, handle);
+    if (route.routeConfig.path == 'host') {
+      CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle;
     }
+  }
 
-    /** 从缓存中获取快照，若无则返回nul */
-    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
-        // console.debug('retrieve======>', route);
-        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);
-    }
+  /** 若 path 在缓存中有的都认为允许还原路由 */
+  shouldAttach(route: ActivatedRouteSnapshot): boolean {
+    // console.debug('shouldAttach======>', route);
+    return !!CustomReuseStrategy.handlers[this.getRouteUrl(route)];
+  }
 
-    /** 使用route的path作为快照的key */
-    getRouteUrl(route: ActivatedRouteSnapshot) {
-        const path = route['_routerState'].url.replace(/\//g, '_');
-        return path;
+  /** 从缓存中获取快照，若无则返回nul */
+  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
+    // console.debug('retrieve======>', route);
+    if (!CustomReuseStrategy.handlers[this.getRouteUrl(route)]) {
+      return null;
     }
+    return CustomReuseStrategy.handlers[this.getRouteUrl(route)];
+  }
 
-}
+  /** 使用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 { CacheTokenService } from './service/cache-token.service'
+import { httpInterceptorProviders } from './http-interceptors/index';
+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: [
-    AppComponent
-  ],
+  declarations: [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 { }
+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
-    }
-    this.http.get('/api/Organizations', {
-      params: params
-    }).subscribe((data: any) => {
-      this.totalCount = data.totalCount
-      console.log(data.items)
-      data.items.forEach(element => {
-        element.key = element.id
-        element.title = element.name
-        element.selectable = false
-        if (element.isGasStation) {
-          element.isLeaf = true
-        }
+      PageSize: 9999,
+    };
+    this.http
+      .get('/api/Organizations', {
+        params: params,
+      })
+      .subscribe((data: any) => {
+        this.totalCount = data.totalCount;
+        console.log(data.items);
+        data.items.forEach((element) => {
+          element.key = element.id;
+          element.title = element.name;
+          element.selectable = false;
+          if (element.isGasStation) {
+            element.isLeaf = true;
+          }
+        });
+        this.nodes = [...this.toTree.toTree(data.items)];
+        this.defaultExpandedKeys = [this.nodes[0].id];
+        this.defaultExpandedKeys = [...this.defaultExpandedKeys];
       });
-      this.nodes = [...this.toTree.toTree(data.items)]
-      this.defaultExpandedKeys = [this.nodes[0].id]
-      this.defaultExpandedKeys = [...this.defaultExpandedKeys]
-    })
   }
 
-
-  @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
+  @ViewChild('nzTreeComponent', { static: false })
+  nzTreeComponent!: NzTreeComponent;
 
   defaultExpandedKeys = [];
 
-  nodes: any[] = []
-  nzSelectedKeys: any[] = []
-  selectedOilStation: any
+  nodes: any[] = [];
+  nzSelectedKeys: any[] = [];
+  selectedOilStation: any;
   nzClick(event: NzFormatEmitEvent): void {
-    if (event.node.origin['isGasStation']) {//如果点击的是加油站才生效
-      this.nzSelectedKeys[0] = event.node.origin.id
-      this.nzSelectedKeys = [...this.nzSelectedKeys]
-      this.selectedOilStation = event.node.origin
-      console.log(this.selectedOilStation)
-      this.getHost()
+    if (event.node.origin['isGasStation']) {
+      //如果点击的是加油站才生效
+      this.nzSelectedKeys[0] = event.node.origin.id;
+      this.nzSelectedKeys = [...this.nzSelectedKeys];
+      this.selectedOilStation = event.node.origin;
+      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.http.get('/api/EdgeDevices', {
-      params: {
-        ContainsChildren: true,
-        OrganizationId: this.selectedOilStation.id,
-        PageSize: 999
-      }
-    }).subscribe((data: any) => {
-      console.log('主机列表', data.items)
-      this.isLoading = false
-      this.listOfData = data.items
-    })
+    this.isLoading = true;
+    this.http
+      .get('/api/EdgeDevices', {
+        params: {
+          ContainsChildren: true,
+          OrganizationId: this.selectedOilStation.id,
+          PageSize: 999,
+        },
+      })
+      .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,105 +133,110 @@ export class AnalysisOfTheHostComponent implements OnInit {
       nzComponentParams: {},
       nzOnOk: async () => {
         if (instance.validateForm.valid) {
-          await new Promise(resolve => {
-            console.log('表单信息', instance.validateForm)
+          await new Promise((resolve) => {
+            console.log('表单信息', instance.validateForm);
             let body = {
               hostIPAddress: instance.validateForm.value.ip,
-              OrganizationId: this.selectedOilStation.id
-            }
-            this.http.post('/api/EdgeDevices', body).subscribe(data => {
-              resolve(data)
+              OrganizationId: this.selectedOilStation.id,
+            };
+            this.http.post('/api/EdgeDevices', body).subscribe((data) => {
+              resolve(data);
               this.message.create('success', '创建成功！');
-              this.getHost()
-              return true
-            })
-          })
+              this.getHost();
+              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 => {
-            console.log('表单信息', instance.validateForm)
-            data.hostIPAddress = instance.validateForm.value.ip,
-              this.http.put(`/api/EdgeDevices/${data.id}`, data).subscribe(data => {
-                resolve(data)
-                this.message.create('success', '修改成功！');
-                this.getHost()
-                return true
-              })
-          })
+          await new Promise((resolve) => {
+            console.log('表单信息', instance.validateForm);
+            (data.hostIPAddress = instance.validateForm.value.ip),
+              this.http
+                .put(`/api/EdgeDevices/${data.id}`, data)
+                .subscribe((data) => {
+                  resolve(data);
+                  this.message.create('success', '修改成功！');
+                  this.getHost();
+                  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({
-      next: (data: any) => {
-        console.log('文件', data)
-        // 文件名中有中文 则对文件名进行转码
-        const link = document.createElement('a');
-        const blob = new Blob([data], { type: 'application/octet-stream' });
-        link.setAttribute('href', window.URL.createObjectURL(blob));
-        link.setAttribute('download', `.deviceid`);
-        link.style.visibility = 'hidden';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-      },
-      error: (err) => {
-        console.log(err)
-      }
-    })
+    this.http
+      .get(`/api/EdgeDevices/IdentityDigest/File`, httpOptions)
+      .subscribe({
+        next: (data: any) => {
+          console.log('文件', data);
+          // 文件名中有中文 则对文件名进行转码
+          const link = document.createElement('a');
+          const blob = new Blob([data], { type: 'application/octet-stream' });
+          link.setAttribute('href', window.URL.createObjectURL(blob));
+          link.setAttribute('download', `.deviceid`);
+          link.style.visibility = 'hidden';
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        },
+        error: (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');