index/src/app/components/admin-header/admin-header.component.html

@@ -0,0 +1,46 @@
+<header>
+    <a href="/">
+        <div>
+            <img src="https://56462271.oss-cn-beijing.aliyuncs.com/web/logo.png"/>
+        </div>
+    </a>
+    <div>
+        <a routerLink="/" id="blogTitle"><span>小海博客</span></a>
+        <span id="desc">记录学习成长历程</span>
+    </div>
+
+
+    <div id="loged" *ngIf="user">
+        <nz-avatar [nzSrc]="user.avatarImgUrl"></nz-avatar>
+        <button nz-button nzType="link" nz-dropdown [nzDropdownMenu]="menu" nzTrigger="click" [nzClickHide]="false">
+            {{user.displayName}}
+            <i nz-icon nzType="down"></i>
+        </button>
+        <nz-dropdown-menu #menu="nzDropdownMenu">
+            <ul nz-menu>
+                <li nz-menu-item><a routerLink="/">博客首页</a></li>
+                <hr style="opacity: 0.6">
+                <li nz-menu-item>
+                    <a (click)="logout()">退出登录</a>
+                </li>
+            </ul>
+        </nz-dropdown-menu>
+    </div>
+
+
+    <div id="landr" *ngIf="!user">
+        <nz-space>
+            <nz-space-item>
+                <a routerLink="/user/login">
+                    <button nz-button nzType="primary">登录</button>
+                </a>
+            </nz-space-item>
+            <nz-space-item>
+                <a routerLink="/user/registration">
+                    <button nz-button nzType="primary">注册</button>
+                </a>
+            </nz-space-item>
+        </nz-space>
+    </div>
+
+</header>

index/src/app/components/admin-header/admin-header.component.less

@@ -0,0 +1,44 @@
+header {
+  height: 70px;
+  background-color: #ffffff;
+  opacity: 0.8;
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  min-width: 350px;
+  padding-top: 10px;
+}
+
+header img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin: 5px 5px 5px 30px;
+  float: left;
+}
+
+a {
+  color: black;
+}
+
+#landr, #loged {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+}
+
+
+#blogTitle, #desc {
+  display: block;
+  margin-left: 15px;
+}
+
+#blogTitle {
+  font-weight: bold;
+  font-size: 20px;
+}
+
+#desc {
+  font-size: 10px;
+}
+

index/src/app/components/admin-header/admin-header.component.spec.ts

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

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

@@ -0,0 +1,27 @@
+import {Component, OnInit} from '@angular/core';
+import {UserService} from '../../services/user.service';
+import {User} from '../../class/User';
+
+@Component({
+    selector: 'c-admin-header',
+    templateUrl: './admin-header.component.html',
+    styleUrls: ['./admin-header.component.less']
+})
+export class AdminHeaderComponent implements OnInit {
+
+    constructor(private userService: UserService) {
+    }
+
+    user: User
+
+    logout = () => this.userService.logout();
+
+    ngOnInit(): void {
+        this.userService.watchUserInfo({
+            next: data => this.user = data.result,
+            error: err => this.user = null,
+            complete: null
+        })
+    }
+
+}