修改路径

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

@@ -0,0 +1,34 @@
+<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" (click)="infoClickedEvent()">
+        <nz-avatar [nzSrc]="user.avatarImgUrl"></nz-avatar>
+        <span>{{user.displayName}}</span>
+    </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>

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

@@ -0,0 +1,47 @@
+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: 60px;
+  top: 20px;
+  cursor: pointer;
+}
+
+
+#blogTitle, #desc {
+  display: block;
+  margin-left: 15px;
+  max-width: 300px;
+}
+
+#blogTitle {
+  font-weight: bold;
+  font-size: 20px;
+}
+
+#desc {
+  font-size: 10px;
+
+}
+

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();
+  });
+});

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

@@ -0,0 +1,29 @@
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {GlobalUserService} from '../../services/global-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: GlobalUserService) {
+    }
+
+    user: User
+    @Output() infoClicked = new EventEmitter<void>()
+
+    logout = () => this.userService.logout();
+    infoClickedEvent = () => this.infoClicked.emit();
+
+    ngOnInit(): void {
+        this.userService.watchUserInfo({
+            next: data => this.user = data.result,
+            error: err => this.user = null,
+            complete: null
+        })
+    }
+
+}