上一節解決了用戶注冊和登錄數據部分的內容。這一節開始分析用戶模塊、用戶路由。## 用戶管理模塊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數組中，CommonModule：是構建子組件必須引入的模塊。用戶登錄控件（LoginComponent）使用了模板驅動表單，需要導入FormsModule，用戶注冊組件（RegistComponent）使用了響應式表單，需要導入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{}

當進入主頁（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組件，進行用戶的注冊操作。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。