添加菜单页路由

src/app/components/bar-menu/bar-menu.component.html

@@ -1,5 +1,5 @@
 <ul class="bar-menu" [hidden]="!data.isExpend"  *ngIf="!isLeaf(data)">
-        <li *ngFor="let item of data.children">
+        <li *ngFor="let item of data.children" [ngClass]="{'active':item.isActive}">
             <a  (click)="itemClicked(item);">
                 <i class="fa mr-3" [ngClass]="item.icon"></i> <span>{{item.name}}</span>   
                 <i style="margin-top:3px;width:17px" class="fa  pull-right"  [ngClass]="{'fa-angle-down': !isLeaf(item) && item.isExpend, 'fa-angle-left': !isLeaf(item) && !item.isExpend}"></i>

src/app/components/bar-menu/bar-menu.component.scss

@@ -55,4 +55,7 @@
             }
         }
     }
+    & > li.active {
+        background: rgb(47, 94, 182);
+    }
 }

src/app/components/bar-menu/bar-menu.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { Router } from '@angular/router'
 
 @Component({
     selector: 'app-bar-menu',
@@ -8,7 +9,9 @@ import { Component, OnInit, Input } from '@angular/core';
 export class BarMenuComponent implements OnInit {
 
     @Input() data: Array<any>;
-    constructor() { }
+    constructor(
+        private router: Router
+    ) { }
 
     ngOnInit() {
     }
@@ -28,6 +31,8 @@ export class BarMenuComponent implements OnInit {
     itemClicked(item: any) {
         if (!this.isLeaf(item)) {
             item.isExpend = !item.isExpend;
+        } else {
+            this.router.navigate([item.path])
         }
     }
 

src/app/components/sidebar-menu/sidebar-menu.component.html

@@ -1,5 +1,5 @@
 <ul class="sidebar-menu">
-    <li *ngFor="let item of data">
+    <li *ngFor="let item of data" [ngClass]="{'active':item.isActive}">
         <a (click)="itemClicked(item);">
             <i style="margin-top:3px;width:17px" class="fa  pull-right" [ngClass]="{'fa-angle-down': !isLeaf(item) && item.isExpend, 'fa-angle-left': !isLeaf(item) && !item.isExpend}"></i>
             <i class="fa mr-3" [ngClass]="item.icon"></i> <span>{{item.name}}</span>

src/app/components/sidebar-menu/sidebar-menu.component.scss

@@ -55,4 +55,7 @@
             }
         }
     }
+    &>li.active{
+        background: rgb(47, 94, 182)
+    }
 }

src/app/components/sidebar-menu/sidebar-menu.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit,Input } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { Router } from '@angular/router'
 
 @Component({
     selector: 'app-sidebar-menu',
@@ -9,7 +10,9 @@ export class SidebarMenuComponent implements OnInit {
     //输入数据
     @Input() data: Array<any>;
 
-    constructor() { }
+    constructor(
+        private router: Router
+    ) { }
 
     ngOnInit() {
 
@@ -30,6 +33,8 @@ export class SidebarMenuComponent implements OnInit {
     itemClicked(item: any) {
         if (!this.isLeaf(item)) {
             item.isExpend = !item.isExpend;
+        } else {
+            this.router.navigate([item.path])
         }
     }
 

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { BasicDataComponent } from './basic-data.component';
+
+const basicDataRoutes: Routes = [
+    {
+        path: '',
+        component: BasicDataComponent
+    }
+]
+
+@NgModule({
+    imports: [RouterModule.forChild(basicDataRoutes)],
+    exports: [RouterModule]
+})
+
+export class BasicDataRouting { }

src/app/pages/basic-data/basic-data.component.html

@@ -0,0 +1,3 @@
+<p>
+  basic-data works!
+</p>

src/app/pages/basic-data/basic-data.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BasicDataComponent } from './basic-data.component';
+
+describe('BasicDataComponent', () => {
+  let component: BasicDataComponent;
+  let fixture: ComponentFixture<BasicDataComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BasicDataComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BasicDataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/basic-data/basic-data.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-basic-data',
+  templateUrl: './basic-data.component.html',
+  styleUrls: ['./basic-data.component.scss']
+})
+export class BasicDataComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,13 @@
+import { BasicDataModule } from './basic-data.module';
+
+describe('BasicDataModule', () => {
+  let basicDataModule: BasicDataModule;
+
+  beforeEach(() => {
+    basicDataModule = new BasicDataModule();
+  });
+
+  it('should create an instance', () => {
+    expect(basicDataModule).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BasicDataComponent } from './basic-data.component';
+import { BasicDataRouting } from './basic-data-routing.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        BasicDataRouting
+    ],
+    declarations: [BasicDataComponent]
+})
+export class BasicDataModule { }

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { HistoricalDataComponent } from './historical-data.component';
+
+const historicalDataRoutes: Routes = [
+    {
+        path: '',
+        component: HistoricalDataComponent
+    }
+]
+
+@NgModule({
+    imports: [RouterModule.forChild(historicalDataRoutes)],
+    exports: [RouterModule]
+})
+
+export class HistoricalDataRouting { }

src/app/pages/historical-data/historical-data.component.html

@@ -0,0 +1,3 @@
+<p>
+  historical-data works!
+</p>

src/app/pages/historical-data/historical-data.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HistoricalDataComponent } from './historical-data.component';
+
+describe('HistoricalDataComponent', () => {
+  let component: HistoricalDataComponent;
+  let fixture: ComponentFixture<HistoricalDataComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HistoricalDataComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HistoricalDataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/historical-data/historical-data.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-historical-data',
+  templateUrl: './historical-data.component.html',
+  styleUrls: ['./historical-data.component.scss']
+})
+export class HistoricalDataComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,13 @@
+import { HistoricalDataModule } from './historical-data.module';
+
+describe('HistoricalDataModule', () => {
+  let historicalDataModule: HistoricalDataModule;
+
+  beforeEach(() => {
+    historicalDataModule = new HistoricalDataModule();
+  });
+
+  it('should create an instance', () => {
+    expect(historicalDataModule).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HistoricalDataComponent } from './historical-data.component';
+import { HistoricalDataRouting } from './historical-data-routing.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        HistoricalDataRouting
+    ],
+    declarations: [HistoricalDataComponent]
+})
+export class HistoricalDataModule { }

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

@@ -16,6 +16,22 @@ const pagesRoutes: Routes = [
             {
                 path:'main',
                 loadChildren:'./main/main.module#MainModule'
+            },
+            {
+                path:'season',
+                loadChildren:'./seasonal-plan/seasonal-plan.module#SeasonalPlanModule'
+            },
+            {
+                path:'history',
+                loadChildren:'./historical-data/historical-data.module#HistoricalDataModule'
+            },
+            {
+                path:'basic',
+                loadChildren:'./basic-data/basic-data.module#BasicDataModule'
+            },
+            {
+                path:'system',
+                loadChildren:'./system-management/system-management.module#SystemManagementModule'
             }
         ]
     }

src/app/pages/pages.component.ts

@@ -1,4 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
+
+import { map, filter, mergeMap } from 'rxjs/operators';
+import { pipe } from 'rxjs'
+// import 'rxjs/add/operator/map';
+// import 'rxjs/add/operator/mergeMap';
 
 @Component({
     selector: 'app-pages',
@@ -12,23 +18,29 @@ export class PagesComponent implements OnInit {
             "name": "航班动态",
             "icon": 'fa-plane',
             "isExpend": false,
-            "path": "/main"
+            "isActive": true,
+            "path": "/app/main"
         },
         {
             "name": "季度计划",
             "icon": 'fa-cube',
             "isExpend": false,
-
+            "isActive": false,
+            "path": "/app/season"
         },
         {
             "name": "历史数据",
             "icon": 'fa-history',
             "isExpend": false,
+            "isActive": false,
+            "path": "/app/history"
         },
         {
             "name": "基础数据",
             "icon": 'fa-database',
             "isExpend": false,
+            "isActive": false,
+            "path": "/app/basic"
         },
         {
             "name": "系统管理",
@@ -38,32 +50,96 @@ export class PagesComponent implements OnInit {
                 {
                     "name": "个人设置",
                     "icon": "fa-cog",
+                    "isExpend": false,
+                    "isActive": false,
+                    "path": "/app/system/settings"
                 },
                 {
                     "name": "角色管理",
                     "icon": "fa-users",
+                    "isExpend": false,
+                    "isActive": false,
+                    "path": "/app/system/roles"
                 },
                 {
                     "name": "用户管理",
                     "icon": "fa-user",
+                    "isExpend": false,
+                    "isActive": false,
+                    "path": "/app/system/users"
                 },
                 {
                     "name": "部门管理",
                     "icon": "fa-street-view",
+                    "isExpend": false,
+                    "isActive": false,
+                    "path": "/app/system/departments"
                 },
                 {
                     "name": "操作日志",
                     "icon": "fa-sticky-note",
+                    "isExpend": false,
+                    "isActive": false,
+                    "path": "/app/system/logs"
                 },
                 {
                     "name": "数据同步",
                     "icon": "fa-refresh",
+                    "isExpend": false,
+                    "isActive": false,
+                    "path": "/app/system/synchronization"
                 },
             ]
         }]
-    constructor() { }
+    constructor(
+        private router: Router,
+        private activatedRoute: ActivatedRoute
+    ) { }
 
     ngOnInit() {
+        let activeRoute = this.router.url;
+        this.selectActiveMenu(this.menuData,activeRoute);
+
+        this.router.events.pipe(
+            filter(event => event instanceof NavigationEnd),
+            // map(() => this.activatedRoute),
+            // map(route => {
+            //     console.log(route)
+            //     while (route.firstChild) route = route.firstChild;
+            //     console.log('-----')
+            //     return route;
+            // }),
+            // filter(route => route.outlet === 'primary'),
+            // mergeMap(route => route.data)
+
+        ).subscribe((event) => {
+            // console.log(event['urlAfterRedirects'])
+            this.selectActiveMenu(this.menuData,event['urlAfterRedirects'])
+        });
+
+    }
+
+    /**
+     * 判断是否有子节点
+     * @param item 
+     */
+    isLeaf(item: any) {
+        return !item.children || !item.children.length;
+    }
+
+    selectActiveMenu(menuData,activeRoute) {
+        menuData.forEach(item => {
+            if (this.isLeaf(item)) {
+                if (item.path === activeRoute) {
+                    item.isActive = true;
+                } else {
+                    item.isActive = false;
+                }
+            }else{
+                // item.isExpend = !item.isExpend;
+                this.selectActiveMenu(item.children,activeRoute)
+            }
+        })
     }
 
 }

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { SeasonalPlanComponent } from './seasonal-plan.component';
+
+const seasonalPlanRoutes: Routes = [
+    {
+        path: '',
+        component: SeasonalPlanComponent
+    }
+]
+
+@NgModule({
+    imports: [RouterModule.forChild(seasonalPlanRoutes)],
+    exports: [RouterModule]
+})
+
+export class SeasonalPlanRouting { }

src/app/pages/seasonal-plan/seasonal-plan.component.html

@@ -0,0 +1,3 @@
+<p>
+  seasonal-plan works!
+</p>

src/app/pages/seasonal-plan/seasonal-plan.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SeasonalPlanComponent } from './seasonal-plan.component';
+
+describe('SeasonalPlanComponent', () => {
+  let component: SeasonalPlanComponent;
+  let fixture: ComponentFixture<SeasonalPlanComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SeasonalPlanComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SeasonalPlanComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/seasonal-plan/seasonal-plan.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-seasonal-plan',
+  templateUrl: './seasonal-plan.component.html',
+  styleUrls: ['./seasonal-plan.component.scss']
+})
+export class SeasonalPlanComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,13 @@
+import { SeasonalPlanModule } from './seasonal-plan.module';
+
+describe('SeasonalPlanModule', () => {
+  let seasonalPlanModule: SeasonalPlanModule;
+
+  beforeEach(() => {
+    seasonalPlanModule = new SeasonalPlanModule();
+  });
+
+  it('should create an instance', () => {
+    expect(seasonalPlanModule).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SeasonalPlanComponent } from './seasonal-plan.component';
+import { SeasonalPlanRouting } from './seasonal-plan-routing.module'
+
+@NgModule({
+    imports: [
+        CommonModule,
+        SeasonalPlanRouting
+    ],
+    declarations: [SeasonalPlanComponent]
+})
+export class SeasonalPlanModule { }

src/app/pages/system-management/data-synchronize/data-synchronize.component.html

@@ -0,0 +1,3 @@
+<p>
+  data-synchronize works!
+</p>

src/app/pages/system-management/data-synchronize/data-synchronize.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataSynchronizeComponent } from './data-synchronize.component';
+
+describe('DataSynchronizeComponent', () => {
+  let component: DataSynchronizeComponent;
+  let fixture: ComponentFixture<DataSynchronizeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DataSynchronizeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataSynchronizeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/system-management/data-synchronize/data-synchronize.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-data-synchronize',
+  templateUrl: './data-synchronize.component.html',
+  styleUrls: ['./data-synchronize.component.scss']
+})
+export class DataSynchronizeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/system-management/department-management/department-management.component.html

@@ -0,0 +1,3 @@
+<p>
+  department-management works!
+</p>

src/app/pages/system-management/department-management/department-management.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DepartmentManagementComponent } from './department-management.component';
+
+describe('DepartmentManagementComponent', () => {
+  let component: DepartmentManagementComponent;
+  let fixture: ComponentFixture<DepartmentManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DepartmentManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DepartmentManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/system-management/department-management/department-management.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-department-management',
+  templateUrl: './department-management.component.html',
+  styleUrls: ['./department-management.component.scss']
+})
+export class DepartmentManagementComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/system-management/operation-logs/operation-logs.component.html

@@ -0,0 +1,3 @@
+<p>
+  operation-logs works!
+</p>

src/app/pages/system-management/operation-logs/operation-logs.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OperationLogsComponent } from './operation-logs.component';
+
+describe('OperationLogsComponent', () => {
+  let component: OperationLogsComponent;
+  let fixture: ComponentFixture<OperationLogsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OperationLogsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OperationLogsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/system-management/operation-logs/operation-logs.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-operation-logs',
+  templateUrl: './operation-logs.component.html',
+  styleUrls: ['./operation-logs.component.scss']
+})
+export class OperationLogsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/system-management/personal-settings/personal-settings.component.html

@@ -0,0 +1,3 @@
+<p>
+  personal-settings works!
+</p>

src/app/pages/system-management/personal-settings/personal-settings.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PersonalSettingsComponent } from './personal-settings.component';
+
+describe('PersonalSettingsComponent', () => {
+  let component: PersonalSettingsComponent;
+  let fixture: ComponentFixture<PersonalSettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PersonalSettingsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PersonalSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/system-management/personal-settings/personal-settings.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-personal-settings',
+  templateUrl: './personal-settings.component.html',
+  styleUrls: ['./personal-settings.component.scss']
+})
+export class PersonalSettingsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/system-management/role-management/role-management.component.html

@@ -0,0 +1,3 @@
+<p>
+  role-management works!
+</p>

src/app/pages/system-management/role-management/role-management.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoleManagementComponent } from './role-management.component';
+
+describe('RoleManagementComponent', () => {
+  let component: RoleManagementComponent;
+  let fixture: ComponentFixture<RoleManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RoleManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoleManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/system-management/role-management/role-management.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-role-management',
+  templateUrl: './role-management.component.html',
+  styleUrls: ['./role-management.component.scss']
+})
+export class RoleManagementComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,55 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router'
+
+import { SystemManagementComponent } from './system-management.component';
+import { PersonalSettingsComponent } from './personal-settings/personal-settings.component';
+import { RoleManagementComponent } from './role-management/role-management.component';
+import { UserManagementComponent } from './user-management/user-management.component';
+import { DepartmentManagementComponent } from './department-management/department-management.component';
+import { OperationLogsComponent } from './operation-logs/operation-logs.component';
+import { DataSynchronizeComponent } from './data-synchronize/data-synchronize.component';
+
+const systemManagementRoutes: Routes = [
+    {
+        path: '',
+        component: SystemManagementComponent,
+        children: [
+            {
+                path: '',
+                redirectTo: 'settings',
+                pathMatch: 'full'
+            },
+            {
+                path: 'settings',
+                component: PersonalSettingsComponent
+            },
+            {
+                path: 'roles',
+                component: RoleManagementComponent
+            },
+            {
+                path: 'users',
+                component: UserManagementComponent
+            },
+            {
+                path: 'departments',
+                component: DepartmentManagementComponent
+            },
+            {
+                path: 'logs',
+                component: OperationLogsComponent
+            },
+            {
+                path: 'synchronization',
+                component: DataSynchronizeComponent
+            }
+        ]
+    }
+]
+
+@NgModule({
+    imports: [RouterModule.forChild(systemManagementRoutes)],
+    exports: [RouterModule]
+})
+
+export class SystemManagementRouting { }

src/app/pages/system-management/system-management.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SystemManagementComponent } from './system-management.component';
+
+describe('SystemManagementComponent', () => {
+  let component: SystemManagementComponent;
+  let fixture: ComponentFixture<SystemManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SystemManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SystemManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-system-management',
+  template:`<router-outlet></router-outlet>`,
+})
+export class SystemManagementComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,13 @@
+import { SystemManagementModule } from './system-management.module';
+
+describe('SystemManagementModule', () => {
+  let systemManagementModule: SystemManagementModule;
+
+  beforeEach(() => {
+    systemManagementModule = new SystemManagementModule();
+  });
+
+  it('should create an instance', () => {
+    expect(systemManagementModule).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SystemManagementComponent } from './system-management.component';
+import { PersonalSettingsComponent } from './personal-settings/personal-settings.component';
+import { RoleManagementComponent } from './role-management/role-management.component';
+import { UserManagementComponent } from './user-management/user-management.component';
+import { DepartmentManagementComponent } from './department-management/department-management.component';
+import { OperationLogsComponent } from './operation-logs/operation-logs.component';
+import { DataSynchronizeComponent } from './data-synchronize/data-synchronize.component';
+
+import { SystemManagementRouting } from './system-management-routing.module'
+
+@NgModule({
+    imports: [
+        CommonModule,
+        SystemManagementRouting
+    ],
+    declarations: [
+        SystemManagementComponent,
+        PersonalSettingsComponent,
+        RoleManagementComponent,
+        UserManagementComponent,
+        DepartmentManagementComponent,
+        OperationLogsComponent,
+        DataSynchronizeComponent]
+})
+export class SystemManagementModule { }

src/app/pages/system-management/user-management/user-management.component.html

@@ -0,0 +1,3 @@
+<p>
+  user-management works!
+</p>

src/app/pages/system-management/user-management/user-management.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserManagementComponent } from './user-management.component';
+
+describe('UserManagementComponent', () => {
+  let component: UserManagementComponent;
+  let fixture: ComponentFixture<UserManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/system-management/user-management/user-management.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-user-management',
+  templateUrl: './user-management.component.html',
+  styleUrls: ['./user-management.component.scss']
+})
+export class UserManagementComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}