From 6f9eb718ce1d66ddb4085ab18944521d0c42c89e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E6=B5=B7?= <zh56462271@qq.com>
Date: Thu, 23 Apr 2020 23:18:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E7=BB=84=E4=BB=B6=E7=9A=84=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E4=BA=A4=E7=BB=99=E6=9C=8D=E5=8A=A1=E6=9D=A5=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index/src/app/app.component.html              | 14 +++--
 index/src/app/app.component.ts                |  4 ++
 .../components/footer/footer.component.html   |  4 +-
 .../app/components/footer/footer.component.ts | 14 +----
 .../app/components/header/header.component.ts | 18 ++----
 .../services/component-state.service.spec.ts  | 16 +++++
 .../app/services/component-state.service.ts   | 61 +++++++++++++++++++
 .../app/view/admin/admin-routing.module.ts    |  2 +-
 8 files changed, 100 insertions(+), 33 deletions(-)
 create mode 100644 index/src/app/services/component-state.service.spec.ts
 create mode 100644 index/src/app/services/component-state.service.ts

diff --git a/index/src/app/app.component.html b/index/src/app/app.component.html
index cffec2c..dee15f6 100644
--- a/index/src/app/app.component.html
+++ b/index/src/app/app.component.html
@@ -1,11 +1,13 @@
-<app-header (loginEvent)="login()" (registrationEvent)="registration()" #headerComponent></app-header>
+<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>
 
-<app-footer></app-footer>
-
-
-<nz-back-top [nzTemplate]="backToTop"></nz-back-top>
+<nz-back-top [nzTemplate]="backToTop" *ngIf="componentStateService.visible.globalBackToTop"></nz-back-top>
 
 <ng-template #backToTop>
     <button style=" height: 60px;width: 60px;border-radius: 50%;" nz-button title="回到顶部">
@@ -28,4 +30,4 @@
     <ng-template #content2>
         <c-registration (regStatus)="regModal = !$event" (regAccount)="cons($event)"></c-registration>
     </ng-template>
-</nz-modal>
\ No newline at end of file
+</nz-modal>
diff --git a/index/src/app/app.component.ts b/index/src/app/app.component.ts
index db08f54..bcbe683 100644
--- a/index/src/app/app.component.ts
+++ b/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');
diff --git a/index/src/app/components/footer/footer.component.html b/index/src/app/components/footer/footer.component.html
index 509f5a6..aa03d97 100644
--- a/index/src/app/components/footer/footer.component.html
+++ b/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">
@@ -9,4 +9,4 @@
             <span>郑海 </span> <span *ngIf="gName">& {{gName}} </span>版权所有
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/index/src/app/components/footer/footer.component.ts b/index/src/app/components/footer/footer.component.ts
index 2c1a818..629bb45 100644
--- a/index/src/app/components/footer/footer.component.ts
+++ b/index/src/app/components/footer/footer.component.ts
@@ -1,6 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {filter} from 'rxjs/operators';
-import {NavigationEnd, Route, Router, RouterEvent} from '@angular/router';
+import {ComponentStateService} from '../../services/component-state.service';
 
 @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) {
-        this.show = true;
+    constructor(public componentStateService: ComponentStateService) {
     }
 
     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;
-            }
-        });
     }
 
 }
diff --git a/index/src/app/components/header/header.component.ts b/index/src/app/components/header/header.component.ts
index ec7cd99..b240920 100644
--- a/index/src/app/components/header/header.component.ts
+++ b/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) => {
-            // 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;
+        // 订阅一级路由的变化
+        componentStateService.watchRouterChange().subscribe(prefix => {
             if (prefix === '/user' || prefix === '/write' || prefix === '/update') {
                 this.size = 'default';
             } else {
diff --git a/index/src/app/services/component-state.service.spec.ts b/index/src/app/services/component-state.service.spec.ts
new file mode 100644
index 0000000..72998f5
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/index/src/app/services/component-state.service.ts b/index/src/app/services/component-state.service.ts
new file mode 100644
index 0000000..94aca02
--- /dev/null
+++ b/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:
+        }
+    }
+}
diff --git a/index/src/app/view/admin/admin-routing.module.ts b/index/src/app/view/admin/admin-routing.module.ts
index afeadd4..8648c1e 100644
--- a/index/src/app/view/admin/admin-routing.module.ts
+++ b/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({