上一章讲解了用户登录的相关代码。用户登录成功后，就会进入好友模块，在好友模块中会根据不同的用户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代码：控件类代码：
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。这一篇先暂时写这么多，下一篇主要介绍三个主要的服务提供程序。敬请期待......