添加路由复用策略

src/app/app-routing.module.ts

@@ -16,17 +16,18 @@ const appRoutes: Routes = [
         path: 'login',
         loadChildren: './login/login.module#LoginModule',
         canActivate: [LoginAuthService],
+        data: { preload: false, reuse: false }
     },
     {
         path: 'register',
         loadChildren: './register/register.module#RegisterModule',
-        // data: { preload: false }
+        data: { preload: false, reuse: false }
     },
     {
         path: 'app',
         loadChildren: './pages/pages.module#PagesModule',
         canActivate: [LoginAuthService],
-        data: { preload: false }
+        data: { preload: false, reuse: true }
     }
 ]
 

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouteReuseStrategy } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common'
 import { HttpClientModule } from '@angular/common/http'
@@ -25,6 +26,9 @@ import { LoginAuthService } from './services/login-auth.service';
 /* websocket */
 import { WebsocketService } from './services/websocket.service';
 
+/* 路由缓存策略 */
+import { AppReuseStrategy } from './router-reuse-strategy';
+
 @NgModule({
     declarations: [
         AppComponent
@@ -43,7 +47,8 @@ import { WebsocketService } from './services/websocket.service';
         LoginAuthService,
         HttpService,
         HttpClientService,
-        WebsocketService
+        WebsocketService,
+        { provide: RouteReuseStrategy, useClass: AppReuseStrategy }
     ],
     bootstrap: [AppComponent]
 })

src/app/login/login-routing.module.ts

@@ -6,7 +6,8 @@ import { LoginComponent } from './login.component'
 const loginRoutes: Routes = [
     {
         path: '',
-        component: LoginComponent
+        component: LoginComponent,
+        data: { preload: false, reuse: false }
     }
 ]
 

src/app/pages/basic-data/basic-data-routing.module.ts

@@ -21,57 +21,75 @@ const basicDataRoutes: Routes = [
         path: '',
         component: BasicDataComponent,
         children:[
+            {
+                path:'',
+                redirectTo:'chekingroup',
+                pathMatch:'full'
+            },
             {
                 path:'checkingroup',
-                component:CheckinGroupComponent
+                component:CheckinGroupComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path:'gate',
-                component:GateComponent
+                component:GateComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path:'terminal',
                 component:TerminalComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path:'chut',
-                component:ChutComponent
+                component:ChutComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path:'stand',
-                component:StandComponent
+                component:StandComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path:'carousel',
-                component:CarouselComponent
+                component:CarouselComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path:'checkindesk',
-                component:CheckinDeskComponent
+                component:CheckinDeskComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path:'airport',
-                component:AirportComponent
+                component:AirportComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path:'city',
-                component:CityComponent
+                component:CityComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path:'aircrafttype',
-                component:AircraftTypeComponent
+                component:AircraftTypeComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path:'aircraft',
-                component:AircraftComponent
+                component:AircraftComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path:'terminalarea',
-                component:TerminalAreaComponent
+                component:TerminalAreaComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path:'airline',
-                component:AirlineComponent
+                component:AirlineComponent,
+                data: { preload: true, reuse: false }
             }
         ]
     }

src/app/pages/historical-data/historical-data-routing.module.ts

@@ -6,7 +6,8 @@ import { HistoricalDataComponent } from './historical-data.component';
 const historicalDataRoutes: Routes = [
     {
         path: '',
-        component: HistoricalDataComponent
+        component: HistoricalDataComponent,
+        data: { preload: true, reuse: false }
     }
 ]
 

src/app/pages/main/main-routing.module.ts

@@ -5,7 +5,8 @@ import { MainComponent } from './main.component'
 const mainRoutes: Routes = [
     {
         path: '',
-        component: MainComponent
+        component: MainComponent,
+        data: { preload: true, reuse: true }
     }
 ]
 

src/app/pages/main/main.component.html

@@ -18,10 +18,7 @@
                     <input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter)="inputEnter()">
                 </div>
                 <div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-1">
-                    <!-- <button type="button" class="btn btn-info mr-3">灯光关闭</button>
-                                                        <button type="button" class="btn btn-info mr-3">查看开关灯记录</button> -->
                     <button type="button" class="btn btn-info mr-3" (click)="refresh()">刷新</button>
-                    <!-- <button type="button" class="btn btn-info">航班动态信息</button> -->
                 </div>
             </div>
 
@@ -53,12 +50,6 @@
                         <option value="">VIP</option>
                     </select>
                 </div>
-                <!-- <div class="input-container mr-4">
-                                                        <label for="">航班任务：&nbsp;&nbsp;</label>
-                                                        <select class="form-control" name="" id="">
-                                                            <option value=""></option>
-                                                        </select>
-                                                    </div> -->
                 <div class="input-container mr-4">
                     <label for="">到达/出发：</label>
                     <select [(ngModel)]="filterItems.MVIN" (ngModelChange)="selectChange()" class="form-control">
@@ -151,7 +142,8 @@
                             [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
                             <td>{{i+1}}</td>
                             <td>{{isLast}}</td>
-                            <td *ngFor="let airline_col of col_lists" [ngClass]="getPosition(airline_col.COL_CODE,airline_row)" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE,airline_row)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
+                            <td *ngFor="let airline_col of col_lists" [ngClass]="getPosition(airline_col.COL_CODE,airline_row)"
+                                [ngStyle]="{'background-color':getColor(airline_col.COL_CODE,airline_row)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
                         </tr>
                     </tbody>
                 </table>

src/app/pages/main/main.component.scss

@@ -1,4 +1,5 @@
 .main-page {
+    position: relative;
     width: 100%;
     height: 100%;
     overflow-y: auto;
@@ -122,6 +123,18 @@
     }
 }
 
+.page-loading{
+    width: 100%;
+    height: 100%;
+    background-image: url('../../../assets/images/page-loading.gif');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999;
+}
+
 // @media screen and (min-width: 1200px){
 //     .line-operator-right{
 //         text-align: left;

src/app/pages/main/main.component.ts

@@ -46,13 +46,14 @@ export class MainComponent implements OnInit {
 
     constructor(
         private basicDataService: BasicDataService,
-        // private operateSpinServiceService:OperateSpinServiceService,
+        private operateSpinServiceService: OperateSpinServiceService,
         private httpCilent: HttpClientService,
         private changeDetectorRef: ChangeDetectorRef,
         private toastService: ToastService,
         private websocketService: WebsocketService
     ) {
         console.log(new Date().getTime())
+        this.operateSpinServiceService.showSpin();
     }
     public tabClose: boolean = true;
     public isSpinning: boolean = true;
@@ -108,12 +109,13 @@ export class MainComponent implements OnInit {
     }
 
     ngOnInit() {
+        
         this.websocketService.dynamicsMessage().subscribe(
             event => {
                 console.log(event);
             }
         )
-        // this.getBasicData()
+
         this.changeDetectorRef.detach();
         /* 获取显示列 */
         this.httpCilent.get('/assets/mock-data/airline-col_code.json').subscribe(
@@ -397,17 +399,13 @@ export class MainComponent implements OnInit {
         sequenceData.forEach(element => {
             element['ORDER'] = this.sequence(element);
         })
-
         sequenceData.sort(function (a, b) {
             return (a['ORDER'] - b['ORDER']);
         })
-
         this.render_data = sequenceData;
         this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
-        console.log(new Date().getTime() + '---');
         this.changeDetectorRef.detectChanges();
-        console.log(new Date().getTime() + '---');
+        this.operateSpinServiceService.hideSpin()
-
     }
 
     /**
@@ -440,9 +438,7 @@ export class MainComponent implements OnInit {
      */
     refresh() {
         this.render_data.reverse();
-        console.log('=====');
         this.changeDetectorRef.detectChanges();
-        console.log('-----');
     }
 
 
@@ -482,7 +478,8 @@ export class MainComponent implements OnInit {
      * 下拉框选择筛选
      */
     selectChange() {
-        // this.operateSpinServiceService.showSpin()
+        this.operateSpinServiceService.showSpin();
+        setTimeout(() => {
             let filter_data = [];
             let filterItems = this.filterItems;
             this.combined_data.forEach(item => {
@@ -568,6 +565,7 @@ export class MainComponent implements OnInit {
                 this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
                 this.changeDetectorRef.detectChanges();
             }
+        }, 10)
     }
 
     /**
@@ -625,6 +623,7 @@ export class MainComponent implements OnInit {
         this.render_data = filterData;
         this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
         this.changeDetectorRef.detectChanges();
+        this.operateSpinServiceService.hideSpin()
     }
 
     /**

src/app/pages/operate-spin-service.service.ts

@@ -16,6 +16,8 @@ export class OperateSpinServiceService {
 
     public hideSpin() {
         this.isSpinning = false;
+        setTimeout(() => {
             this.spinSubject.next(this.isSpinning);
+        }, 500)
     }
 }

src/app/pages/pages-routing.module.ts

@@ -15,23 +15,28 @@ const pagesRoutes: Routes = [
             },
             {
                 path:'main',
-                loadChildren:'./main/main.module#MainModule'
+                loadChildren:'./main/main.module#MainModule',
+                data: { preload: true, reuse: true }
             },
             {
                 path:'season',
-                loadChildren:'./seasonal-plan/seasonal-plan.module#SeasonalPlanModule'
+                loadChildren:'./seasonal-plan/seasonal-plan.module#SeasonalPlanModule',
+                data: { preload: true, reuse: false }
             },
             {
                 path:'history',
-                loadChildren:'./historical-data/historical-data.module#HistoricalDataModule'
+                loadChildren:'./historical-data/historical-data.module#HistoricalDataModule',
+                data: { preload: true, reuse: false }
             },
             {
                 path:'basic',
-                loadChildren:'./basic-data/basic-data.module#BasicDataModule'
+                loadChildren:'./basic-data/basic-data.module#BasicDataModule',
+                data: { preload: true, reuse: false }
             },
             {
                 path:'system',
-                loadChildren:'./system-management/system-management.module#SystemManagementModule'
+                loadChildren:'./system-management/system-management.module#SystemManagementModule',
+                data: { preload: true, reuse: false }
             }
         ]
     }

src/app/pages/pages.component.html

@@ -83,10 +83,8 @@
             </div>
         </div>
         <div class="right-wrapper" [ngClass]="{'right-wrapper-c': menuClose,'right-wrapper-o': !menuClose}">
-            <!-- <nz-spin [nzSpinning]="isSpinning" [nzDelay]="500"> -->
             <router-outlet></router-outlet>
-            <!-- </nz-spin> -->
+            <div *ngIf="isSpinning" class="page-loading"></div>
-
         </div>
     </div>
 </div>

src/app/pages/pages.component.scss

@@ -110,6 +110,7 @@
             }
         }
         .right-wrapper {
+            position: relative;
             height: calc(100% - 66px);
             margin-left: 235px;
         }
@@ -128,3 +129,16 @@
         }
     }
 }
+
+.page-loading{
+    width: 100%;
+    height: 100%;
+    // background-image: url('../../assets/images/page-loading.gif');
+    background-color: rgba(0, 0, 0, 0.5);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999;
+}

src/app/pages/pages.component.ts

@@ -18,7 +18,7 @@ import { filter } from 'rxjs/operators';
 })
 export class PagesComponent implements OnInit {
     public menuClose: boolean = false;
-    public isSpinning: any = false;
+    public isSpinning: any = true;
     menuData = [
         {
             "name": "航班动态",
@@ -192,7 +192,7 @@ export class PagesComponent implements OnInit {
     constructor(
         private router: Router,
         private basicDataService: BasicDataService,
-        // private operateSpinService: OperateSpinServiceService,
+        private operateSpinService: OperateSpinServiceService,
         private httpClient: HttpClientService,
         private toastService: ToastService,
     ) {
@@ -209,9 +209,9 @@ export class PagesComponent implements OnInit {
             this.selectActiveMenu(this.menuData, event['urlAfterRedirects'])
         });
 
-        // this.operateSpinService.spinSubject.subscribe(
+        this.operateSpinService.spinSubject.subscribe(
-        //     val => this.isSpinning = val
+            val => this.isSpinning = val
-        // )
+        )
 
     }
 

src/app/pages/pages.module.ts

@@ -20,6 +20,6 @@ import { OperateSpinServiceService } from './operate-spin-service.service';
         PagesRoutingModule,
     ],
     declarations: [PagesComponent],
-    providers: [BasicDataService]
+    providers: [BasicDataService, OperateSpinServiceService]
 })
 export class PagesModule { }

src/app/pages/seasonal-plan/seasonal-plan-routing.module.ts

@@ -6,7 +6,8 @@ import { SeasonalPlanComponent } from './seasonal-plan.component';
 const seasonalPlanRoutes: Routes = [
     {
         path: '',
-        component: SeasonalPlanComponent
+        component: SeasonalPlanComponent,
+        data: { preload: true, reuse: false }
     }
 ]
 

src/app/pages/system-management/system-management-routing.module.ts

@@ -22,31 +22,38 @@ const systemManagementRoutes: Routes = [
             },
             {
                 path: 'settings',
-                component: PersonalSettingsComponent
+                component: PersonalSettingsComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path: 'roles',
-                component: RoleManagementComponent
+                component: RoleManagementComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path: 'users',
                 component: UserManagementComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path: 'departments',
-                component: DepartmentManagementComponent
+                component: DepartmentManagementComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path: 'logs',
-                component: OperationLogsComponent
+                component: OperationLogsComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path: 'synchronization',
-                component: DataSynchronizeComponent
+                component: DataSynchronizeComponent,
+                data: { preload: true, reuse: false }
             },
             {
                 path: 'users/modify',
-                component: UserManagementModifyComponent
+                component: UserManagementModifyComponent,
+                data: { preload: true, reuse: false }
             }
         ]
     }

src/app/register/register-routing.module.ts

@@ -6,7 +6,8 @@ import { RegisterComponent } from './register.component'
 const registerRoutes: Routes = [
     {
         path: '',
-        component: RegisterComponent
+        component: RegisterComponent,
+        data: { preload: false, reuse: false }
     }
 ]
 

src/app/router-reuse-strategy.ts

@@ -0,0 +1,85 @@
+import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
+import { Injectable } from '@angular/core';
+
+interface IRouteConfigData {
+    reuse: boolean;
+}
+
+interface ICachedRoute {
+    handle: DetachedRouteHandle;
+    data: IRouteConfigData;
+}
+@Injectable()
+export class AppReuseStrategy implements RouteReuseStrategy {
+    private routeCache = new Map<string, ICachedRoute>();
+
+    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+        return future.routeConfig === curr.routeConfig;
+    }
+
+    shouldDetach(route: ActivatedRouteSnapshot): boolean {
+        const data = this.getRouteData(route);
+        return data && data.reuse;
+    }
+
+    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
+        const url = this.getFullRouteUrl(route);
+        const data = this.getRouteData(route);
+        this.routeCache.set(url, { handle, data });
+        this.addRedirectsRecursively(route);
+    }
+
+    shouldAttach(route: ActivatedRouteSnapshot): boolean {
+        const url = this.getFullRouteUrl(route);
+        return this.routeCache.has(url);
+    }
+
+    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
+        console.log(route)
+        const url = this.getFullRouteUrl(route);
+        const data = this.getRouteData(route);
+        console.log(this.routeCache.get(url));
+        return data && data.reuse && this.routeCache.has(url)
+            ? this.routeCache.get(url).handle
+            : null;
+    }
+
+    private addRedirectsRecursively(route: ActivatedRouteSnapshot): void {
+        const config = route.routeConfig;
+        if (config) {
+            if (!config.loadChildren) {
+                const routeFirstChild = route.firstChild;
+                const routeFirstChildUrl = routeFirstChild
+                    ? this.getRouteUrlPaths(routeFirstChild).join('/')
+                    : '';
+                const childConfigs = config.children;
+                if (childConfigs) {
+                    const childConfigWithRedirect = childConfigs.find(c => c.path === '' && !!c.redirectTo);
+                    if (childConfigWithRedirect) {
+                        childConfigWithRedirect.redirectTo = routeFirstChildUrl;
+                    }
+                }
+            }
+            route.children.forEach(childRoute => this.addRedirectsRecursively(childRoute));
+        }
+    }
+
+    private getFullRouteUrl(route: ActivatedRouteSnapshot): string {
+        return this.getFullRouteUrlPaths(route).filter(Boolean).join('/');
+    }
+
+    private getFullRouteUrlPaths(route: ActivatedRouteSnapshot): string[] {
+        const paths = this.getRouteUrlPaths(route);
+        return route.parent
+            ? [...this.getFullRouteUrlPaths(route.parent), ...paths]
+            : paths;
+    }
+
+    private getRouteUrlPaths(route: ActivatedRouteSnapshot): string[] {
+        return route.url.map(urlSegment => urlSegment.path);
+    }
+
+    private getRouteData(route: ActivatedRouteSnapshot): IRouteConfigData {
+        return route.routeConfig && route.routeConfig.data as IRouteConfigData;
+    }
+}

src/app/services/websocket.service.ts

@@ -28,6 +28,7 @@ export class WebsocketService {
                 ob.error("连接失败")
             }
             this.websocket.onclose = () => {
+                console.log('websocket was complete')
                 ob.complete();
             }
         })