利用angular4和nodejs-express構建一個簡單的網站（十）—好友模塊

上一章講解了用戶登陸的相關代碼。用戶登陸成功後，就會進入好友模塊，在好友模塊中會根據不一樣的用戶ID顯示相應的好友列表，點擊好友列表中的單個好友就會進入編輯單個好友頁面，對好友信息進行編輯。點擊列表頁面的添加按鈕，就會添加新的好友。
咱們從這一章開始分析這個好友模塊。

模塊代碼分析

模塊基本代碼以下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { BirthdaysComponent } from './birthdays/birthdays.component';
import { BirthdayListComponent } from './birthday-list/birthday-list.component';
import { BirthdayRoutingModule } from './birthday-routing.module';
import { BirthdayService } from './birthday.service';
import { BirthdayDetailComponent } from './birthday-detail/birthday-detail.component';
import { AuthGuardService } from '../auth-guard.service';
import { AuthInterceptor } from '../auth-interceptor';
@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    BirthdayRoutingModule
  ],
  providers:[
    BirthdayService,
    AuthGuardService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi:true
    }
  ],
  declarations: [BirthdaysComponent, BirthdayListComponent, BirthdayDetailComponent]
})
export class BirthdaysModule { }

在模塊代碼中除了做爲子模塊必須的導入的CommonModule模塊，還導入了ReactiveFormsModule,BirthdayRoutingModule兩個模塊，ReactiveFormsModule模塊用於編輯用戶信息的提交表單，基本用法和用戶註冊的表單相同，BirthdayRoutingModule模塊用於設置路由。
在providers中提供了BirthdayService、AuthGuardService和一個HTTP請求攔截器，分別用於提供數據服務、路由守衛服務和HTTP攔截服務。
在這個模塊下共有三個組件：BirthdaysComponent、BirthdayListComponent、BirthdayDetailComponent。
下面開始逐項進行分析。

路由

路由模塊BirthdayRoutingModule負責整個Birthdays模塊的所有路由。代碼以下：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BirthdaysComponent } from './birthdays/birthdays.component';
import { BirthdayListComponent } from './birthday-list/birthday-list.component';
import { AuthGuardService } from '../auth-guard.service';
import { BirthdayDetailComponent } from './birthday-detail/birthday-detail.component';
const birthRoutes: Routes = [
    {
        path: 'birthday',
        component: BirthdaysComponent,
        canActivate: [AuthGuardService],
        children: [
            { path: '', component: BirthdayListComponent },
            {
                path: ':id',
                component: BirthdayDetailComponent
            },
            {
                path:'new',
                component:BirthdayDetailComponent
            }
        ]
    },
];
@NgModule({
    imports: [RouterModule.forChild(birthRoutes)],
    exports: [RouterModule]
})
export class BirthdayRoutingModule {}

當地址導航到localhost:4200/birthday時，首先加載BirthdaysComponent控件，BirthdaysComponent控件只要提供一個路由插座和用戶的註銷操做。
BirthdaysComponent代碼比較簡單：在這裏直接給出html代碼和類代碼
html代碼：

<button type="button" class="btn btn-secondary logout" (click)="logout()">
  Logout</button>
<router-outlet></router-outlet>

控件類代碼：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { JumbotronServive, Jumbotron } from '../../jumbotron.service';
import { AuthTokenService } from '../../authtoken.service';
@Component({
  selector: 'app-birthdays',
  templateUrl: './birthdays.component.html',
  styleUrls: ['./birthdays.component.css']
})
export class BirthdaysComponent{
  constructor(
    private jumbServ: JumbotronServive,
    private tokenServ: AuthTokenService,
    private router: Router) {
    jumbServ.setJumbotron(new Jumbotron('Friends', '', ''));
  }
  logout() {
    this.tokenServ.setToken(null);
    this.router.navigate(['/']);
  }
}

當點擊Logout按鈕時，執行logout()函數，清空保存在本地的認證信息，並導航到首頁。
...
<繼續路由分析>
birthday路徑下有三個子路由，分別爲："空"，對應BirthdayListComponent組件。":id"和"new"，對應同一個BirthdayDetailComponent組件，當導航到"new"路徑時，[routerLink]="[0]"，":id"的routerLink爲具體的id。
這一篇先暫時寫這麼多，下一篇主要介紹三個主要的服務提供程序。敬請期待......