利用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模块用于设置路由。 路由路由模块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控件只要提供一个路由插座和用户的注销操作。 <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。这一篇先暂时写这么多,下一篇主要介绍三个主要的服务提供程序。敬请期待...... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |