使用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';从'./birthdays/birthdays.component'导入{BirthdaysComponent};从'./birthday-list/birthday-list.component'导入{BirthdayListComponent};从'./导入{BirthdayRoutingModule}birthday-routing.module';从'./birthday.service'导入{BirthdayService};从'./birthday-detail/birthday-detail.component'导入{BirthdayDetailComponent};从'../auth-导入{AuthGuardService}guard.service';import{AuthInterceptor}from'../auth-interceptor';@NgModule({imports:[CommonModule,ReactiveFormsModule,BirthdayRoutingModule],providers:[BirthdayService,AuthGuardService,{provide:HTTP_INTERCEPTORS,useClass:AuthInterceptor,multi:true}],声明:[BirthdaysComponent,BirthdayListComponent,BirthdayDetailComponent]})exportclassBirthdaysModule{}在模块代码中，除了作为子模块必须导入的CommonModule模块外，还导入了ReactiveFormsModule和BirthdayRoutingModule两个模块。ReactiveFormsModule模块用于编辑用户信息的提交表单。基本用法和用户注册的表单是一样的，使用BirthdayRoutingModule模块来设置路由。Provider提供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';constbirthRoutes:Routes=[{path:'birthday',component:BirthdaysComponent,canActivate:[AuthGuardService],children:[{path:'',component:BirthdayListComponent},{path:':id',component:BirthdayDetailComponent},{路径:'new',component:BirthdayDetailComponent}]},];@NgModule({imports:[RouterModule.forChild(birthRoutes)],exports:[RouterModule]})exportclassBirthdayRoutingModule{}当当地址导航到localhost:4200/birthday时，首先加载BirthdaysComponent控件，BirthdaysComponent控件只需要提供路由socket和用户注销操作即可BirthdaysComponent的代码比较简单：直接给出html代码和class代码这里html代码：Logout控制类代码：import{Component,OnInit}from'@angular/core';从'@angular/router'导入{路由器}；从'../../jumbotron.service'导入{JumbotronServive，Jumbotron};从'../../authtoken.service'导入{AuthTokenService};@Component（{选择器：'app-birthdays'，templateUrl：'./birthdays.component.html',styleUrls:['./birthdays.component.css']})exportclassBirthdaysComponent{constructor(privatejumbServ:JumbotronServive,privatetokenServ:AuthTokenService,privaterouter:Router){jumbServ.setJumbotron(newJumbotron('朋友',,''));}logout(){this.tokenServ.setToken(null);this.router.navigate(['/']);}}单击注销按钮时，将执行注销()函数并保存本地身份验证信息并导航至主页。...<继续路由分析>birthday路径下有3个子路由，都是“空”的，对应BirthdayListComponent组件。":id"和"new"对应同一个BirthdayDetailComponent组件。当导航到“新”路径时，[routerLink]="[0]"，":id"的routerLink是具体的id。这篇文章就暂时写这么多，下一篇主要介绍三大服务商。敬请关注...