上一節(jié)解決了用戶注冊和登錄數(shù)據(jù)部分的內(nèi)容。這一節(jié)開始分析用戶模塊、用戶路由。## 用戶管理模塊UserModule分析 ##
UserModule主要代碼如下：

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LoginComponent } from './login/login.component'; import { UsersComponent } from './users/users.component'; import { UsersRoutingModule } from './users-routing.module'; import { HomeComponent } from './home/home.component'; import { RegistComponent } from './regist/regist.component'; @NgModule({imports: [CommonModule,FormsModule,ReactiveFormsModule,UsersRoutingModule,],declarations: [UsersComponent,LoginComponent,HomeComponent,RegistComponent,] }) export class UsersModule { }

import數(shù)組中，CommonModule：是構(gòu)建子組件必須引入的模塊。用戶登錄控件（LoginComponent）使用了模板驅(qū)動表單，需要導(dǎo)入FormsModule，用戶注冊組件（RegistComponent）使用了響應(yīng)式表單，需要導(dǎo)入ReactiveFormsModule，用戶路由模塊UsersRoutingModule主要代碼如下：

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router';import { LoginComponent } from './login/login.component'; import { UsersComponent } from './users/users.component'; import { HomeComponent } from './home/home.component'; import { RegistComponent } from './regist/regist.component'; 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{}

當(dāng)進(jìn)入主頁（localhost）時，因為AppRoutingModule中直接重定向到users,所以直接進(jìn)入到了users的路由，進(jìn)入users路由后，直接加載了users模塊的UsersRoutingModule，當(dāng)路由為''時，加載UsersComponent組件，UsersComponent組件只有一個路由插座標(biāo)簽：

<router-outlet></router-outlet>

所有users模塊的組件都要在這對標(biāo)簽中呈現(xiàn)。他的子路由包括

{path:'', component:HomeComponent},{path: 'login', component: LoginComponent},{path:'regist',component:RegistComponent}

所以，最終的初始頁面為HomeComponent組件的模板內(nèi)容：

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

在這個模板中的兩個鏈接標(biāo)簽中，分別提供了導(dǎo)航到登錄和注冊路由的routerLink：

• [routerLink]="['login']
• [routerLink]="['regist']"

當(dāng)點擊Login標(biāo)簽時，根據(jù)路由定義直接跳轉(zhuǎn)到LoginComponent組件，進(jìn)行用戶的登錄操作。
當(dāng)點擊Regist標(biāo)簽時，根據(jù)路由定義直接跳轉(zhuǎn)到RegistComponent組件，進(jìn)行用戶的注冊操作。

總結(jié)

以上是生活随笔為你收集整理的利用angular4和nodejs-express构建一个简单的网站（六）—用户模块和路由分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。