将组件的状态交给服务来控制

index/src/app/app.component.html

@@ -1,11 +1,13 @@
+<ng-container *ngIf="componentStateService.visible.header">
     <app-header (loginEvent)="login()" (registrationEvent)="registration()" #headerComponent></app-header>
+</ng-container>
 
 <router-outlet></router-outlet>
-
+<ng-container *ngIf="componentStateService.visible.footer">
     <app-footer></app-footer>
+</ng-container>
 
-
+<nz-back-top [nzTemplate]="backToTop" *ngIf="componentStateService.visible.globalBackToTop"></nz-back-top>
-<nz-back-top [nzTemplate]="backToTop"></nz-back-top>
 
 <ng-template #backToTop>
     <button style=" height: 60px;width: 60px;border-radius: 50%;" nz-button title="回到顶部">

index/src/app/app.component.ts

@@ -1,6 +1,7 @@
 import {Component, ElementRef, OnInit, TemplateRef, ViewChild} from '@angular/core';
 import {LoginReq} from './class/User';
 import {HeaderComponent} from './components/header/header.component';
+import {ComponentStateService} from './services/component-state.service';
 
 @Component({
     selector: 'app-root',
@@ -12,6 +13,9 @@ export class AppComponent {
     regModal: boolean = false;
     @ViewChild('headerComponent') header: HeaderComponent;
 
+    constructor(public componentStateService: ComponentStateService) {
+    }
+
     registration() {
         // todo :: 登录
         // console.log('registration');

index/src/app/components/footer/footer.component.html

@@ -1,4 +1,4 @@
-<div class="footer" *ngIf="show">
+<div class="footer">
     <nz-divider></nz-divider>
     <div>
         <a href="http://www.miitbeian.gov.cn" target="_blank">

index/src/app/components/footer/footer.component.ts

@@ -1,6 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {filter} from 'rxjs/operators';
+import {ComponentStateService} from '../../services/component-state.service';
-import {NavigationEnd, Route, Router, RouterEvent} from '@angular/router';
 
 @Component({
     selector: 'app-footer',
@@ -8,22 +7,13 @@ import {NavigationEnd, Route, Router, RouterEvent} from '@angular/router';
     styleUrls: ['./footer.component.less']
 })
 export class FooterComponent implements OnInit {
-    show: boolean;
 
-    constructor(private router: Router) {
+    constructor(public componentStateService: ComponentStateService) {
-        this.show = true;
     }
 
     readonly gName: string;
 
     ngOnInit() {
-        this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e: RouterEvent) => {
-            const indexOf = e.url.lastIndexOf('/');
-            const prefix = e.url.substr(0, indexOf === 0 ? e.url.length : indexOf);
-            if (prefix === '/user' || prefix === '/write') {
-                this.show = false;
-            }
-        });
     }
 
 }

index/src/app/components/header/header.component.ts

@@ -1,9 +1,9 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Router} from '@angular/router';
 import {windowWidthChange} from '../../utils/util';
-import {NavigationEnd, Router, RouterEvent} from '@angular/router';
-import {filter} from 'rxjs/operators';
 import {ApiService} from '../../api/api.service';
 import {User} from '../../class/User';
+import {ComponentStateService} from '../../services/component-state.service';
 
 @Component({
     selector: 'app-header',
@@ -13,7 +13,8 @@ import {User} from '../../class/User';
 export class HeaderComponent implements OnInit {
 
     constructor(private router: Router,
-                private apiService: ApiService) {
+                private apiService: ApiService,
+                public componentStateService: ComponentStateService) {
         this.pageList = [
             {name: '首页', path: '/', icon: 'home', iconType: 'fill', show: true},
             {name: '分类', path: '/categories', icon: 'project', iconType: 'fill', show: true},
@@ -33,15 +34,8 @@ export class HeaderComponent implements OnInit {
             this.showList = window.innerWidth > this.mobileMaxWidth;
             this.changeLoginButtonV();
         });
-
+        // 订阅一级路由的变化
-        this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e: RouterEvent) => {
+        componentStateService.watchRouterChange().subscribe(prefix => {
-            // indexOf ==>  -1/index
-            const indexOfParam = e.url.indexOf('?');
-            const path = e.url.substr(0, indexOfParam === -1 ? e.url.length : indexOfParam);
-            // lastIndexOf ==> 0/index
-            const indexOf = path.lastIndexOf('/');
-            const prefix = path.substr(0, indexOf === 0 ? path.length : indexOf);
-            this.currentPath = prefix;
             if (prefix === '/user' || prefix === '/write' || prefix === '/update') {
                 this.size = 'default';
             } else {

index/src/app/services/component-state.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ComponentStateService } from './component-state.service';
+
+describe('CompentStateService', () => {
+  let service: ComponentStateService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ComponentStateService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

index/src/app/services/component-state.service.ts

@@ -0,0 +1,61 @@
+import {Injectable} from '@angular/core';
+import {filter} from 'rxjs/operators';
+import {NavigationEnd, Router, RouterEvent} from '@angular/router';
+import {Observable, of, Subscriber} from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ComponentStateService {
+
+    constructor(private router: Router) {
+        this.watchRouterChange()
+    }
+
+    visible = {
+        header: true,
+        footer: true,
+        globalBackToTop: true
+    }
+
+    currentPath: string
+    getCurrentRouterPath = () => this.currentPath;
+
+    watchRouterChange() {
+        let subscriber: Subscriber<string>;
+        const ob = new Observable(o => subscriber = o);
+        this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e: RouterEvent) => {
+            // indexOf ==>  -1/index
+            const indexOfParam = e.url.indexOf('?');
+            const path = e.url.substr(0, indexOfParam === -1 ? e.url.length : indexOfParam);
+            // lastIndexOf ==> 0/index
+            const indexOf = path.lastIndexOf('/');
+            const prefix = path.substr(0, indexOf === 0 ? path.length : indexOf);
+            this.dealWithPathChange(prefix)
+            this.currentPath = prefix;
+            subscriber.next(prefix)
+        });
+        return ob;
+    }
+
+    private dealWithPathChange(path) {
+        // tslint:disable-next-line:forin
+        for (const visibleKey in this.visible) {
+            this.visible[visibleKey] = true
+        }
+        switch (path) {
+            case '/admin':
+                this.visible.header = false
+                this.visible.footer = false
+                this.visible.globalBackToTop = false
+                break
+            case '/user':
+            case '/write':
+                this.visible.footer = false
+                this.visible.globalBackToTop = false
+                break;
+
+            default:
+        }
+    }
+}

index/src/app/view/admin/admin-routing.module.ts

@@ -13,7 +13,6 @@ import {AdminVisitorComponent} from './admin-visitor/admin-visitor.component';
 
 
 const routes: Routes = [
-    {path: '', pathMatch: 'full', component: AdminIndexComponent},
     {path: 'article', component: AdminArticleComponent},
     {path: 'comment', component: AdminCommentComponent},
     {path: 'category', component: AdminCategoryComponent},
@@ -23,6 +22,7 @@ const routes: Routes = [
     {path: 'user', component: AdminUserComponent},
     {path: 'userInfo', component: AdminUserinfoComponent},
     {path: 'visitor', component: AdminVisitorComponent},
+    {path: '**', component: AdminIndexComponent}
 ];
 
 @NgModule({