上一节解决了用户注册和登录数据部分的内容。这一节开始分析用户模块、用户路由。## 用户管理模块UserModule分析 ##
UserModule主要代码如下：
import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { LoginComponent } from './login/ponent';import { UsersComponent } from './users/ponent';import { UsersRoutingModule } from './users-routing.module';import { HomeComponent } from './home/ponent';import { RegistComponent } from './regist/ponent';@NgModule({imports: [CommonModule,FormsModule,ReactiveFormsModule,UsersRoutingModule,],declarations: [UsersComponent,LoginComponent,HomeComponent,RegistComponent,]})export class UsersModule { }
import数组中，CommonModule：是构建子组件必须引入的模块。用户登录控件（LoginComponent）使用了模板驱动表单，需要导入FormsModule，用户注册组件（RegistComponent）使用了响应式表单，需要导入ReactiveFormsModule，用户路由模块UsersRoutingModule主要代码如下：
import { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';import { LoginComponent } from './login/ponent';import { UsersComponent } from './users/ponent';import { HomeComponent } from './home/ponent';import { RegistComponent } from './regist/ponent';const usersRoutes: Routes = [{path:'',component:UsersComponent,children:[{path:'', component:HomeComponent},{path: 'login', component: LoginComponent},{path:'regist',component:RegistComponent}]},];@NgModule({imports:[RouterModule.forChild(usersRoutes)],exports:[RouterModule]})export class UsersRoutingModule{}
当进入主页（localhost）时，因为AppRoutingModule中直接重定向到users,所以直接进入到了users的路由，进入users路由后，直接加载了users模块的UsersRoutingModule，当路由为''时，加载UsersComponent组件，UsersComponent组件只有一个路由插座标签：
<router-outlet></router-outlet>
所有users模块的组件都要在这对标签中呈现。他的子路由包括
{path:'', component:HomeComponent},{path: 'login', component: LoginComponent},{path:'regist',component:RegistComponent}
所以，最终的初始页面为HomeComponent组件的模板内容：
<p class="lead"><a class="btn btn-primary btn-lg" name="login" triggers="manual" #login="ngbPopover" placement="left" (mouseenter)="showPopver($event)"(mouseleave)="closePopover($event)" [routerLink]="['login']" ngbPopover="Please login first" role="Login">Login</a><a class="btn btn-warning btn-lg" #regist="ngbPopover" placement="right" (mouseenter)="showPopver($event)" (mouseleave)="closePopover($event)"[routerLink]="['regist']" name="regist" data-toggle="tooltip" ngbPopover="Please regist a user" role="regist">Regist</a></p>
在这个模板中的两个链接标签中，分别提供了导航到登录和注册路由的routerLink：
[routerLink]="['login'][routerLink]="['regist']"
当点击Login标签时，根据路由定义直接跳转到LoginComponent组件，进行用户的登录操作。
当点击Regist标签时，根据路由定义直接跳转到RegistComponent组件，进行用户的注册操作。
