摘要：我們從這一章開始分析這個(gè)好友模塊。在中提供了和一個(gè)請(qǐng)求攔截器，分別用于提供數(shù)據(jù)服務(wù)路由守衛(wèi)服務(wù)和攔截服務(wù)。在這個(gè)模塊下共有三個(gè)組件。路由路由模塊負(fù)責(zé)整個(gè)模塊的全部路由。和，對(duì)應(yīng)同一個(gè)組件，當(dāng)導(dǎo)航到路徑時(shí)，，的為具體的。

上一章講解了用戶登錄的相關(guān)代碼。用戶登錄成功后，就會(huì)進(jìn)入好友模塊，在好友模塊中會(huì)根據(jù)不同的用戶ID顯示相應(yīng)的好友列表，點(diǎn)擊好友列表中的單個(gè)好友就會(huì)進(jìn)入編輯單個(gè)好友頁(yè)面，對(duì)好友信息進(jìn)行編輯。點(diǎn)擊列表頁(yè)面的添加按鈕，就會(huì)添加新的好友。
我們從這一章開始分析這個(gè)好友模塊。

模塊基本代碼如下：

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 { }

在模塊代碼中除了作為子模塊必須的導(dǎo)入的CommonModule模塊，還導(dǎo)入了ReactiveFormsModule,BirthdayRoutingModule兩個(gè)模塊，ReactiveFormsModule模塊用于編輯用戶信息的提交表單，基本用法和用戶注冊(cè)的表單相同，BirthdayRoutingModule模塊用于設(shè)置路由。
在providers中提供了BirthdayService、AuthGuardService和一個(gè)HTTP請(qǐng)求攔截器，分別用于提供數(shù)據(jù)服務(wù)、路由守衛(wèi)服務(wù)和HTTP攔截服務(wù)。
在這個(gè)模塊下共有三個(gè)組件：BirthdaysComponent、BirthdayListComponent、BirthdayDetailComponent。
下面開始逐項(xiàng)進(jìn)行分析。

路由模塊BirthdayRoutingModule負(fù)責(zé)整個(gè)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 {}

當(dāng)?shù)刂穼?dǎo)航到localhost:4200/birthday時(shí)，首先加載BirthdaysComponent控件，BirthdaysComponent控件只要提供一個(gè)路由插座和用戶的注銷操作。
BirthdaysComponent代碼比較簡(jiǎn)單：在這里直接給出html代碼和類代碼
html代碼：

  Logout

控件類代碼：

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(["/"]);
  }
}

當(dāng)點(diǎn)擊Logout按鈕時(shí)，執(zhí)行l(wèi)ogout()函數(shù)，清空保存在本地的認(rèn)證信息，并導(dǎo)航到首頁(yè)。
...
<繼續(xù)路由分析>
birthday路徑下有三個(gè)子路由，分別為："空"，對(duì)應(yīng)BirthdayListComponent組件。":id"和"new"，對(duì)應(yīng)同一個(gè)BirthdayDetailComponent組件，當(dāng)導(dǎo)航到"new"路徑時(shí)，[routerLink]="[0]"，":id"的routerLink為具體的id。
這一篇先暫時(shí)寫這么多，下一篇主要介紹三個(gè)主要的服務(wù)提供程序。敬請(qǐng)期待......