利用angular4和nodejs-express构建一个简单的网站（六）—用户模块和路由分析

摘要：上一节解决了用户注册和登录数据部分的内容。这一节开始分析用户模块用户路由。用户管理模块分析主要代码如下数组中，是构建子组件必须引入的模块。当点击标签时，根据路由定义直接跳转到组件，进行用户的注册操作。

上一节解决了用户注册和登录数据部分的内容。这一节开始分析用户模块、用户路由。## 用户管理模块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组件只有一个路由插座标签：

所有users模块的组件都要在这对标签中呈现。他的子路由包括

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

所以，最终的初始页面为HomeComponent组件的模板内容：

      Login
      Regist
    

在这个模板中的两个链接标签中，分别提供了导航到登录和注册路由的routerLink：

[routerLink]="["login"]

[routerLink]="["regist"]"

当点击Login标签时，根据路由定义直接跳转到LoginComponent组件，进行用户的登录操作。
当点击Regist标签时，根据路由定义直接跳转到RegistComponent组件，进行用户的注册操作。