当前位置: 首页 > Web前端 > HTML5

使用angular4和nodejs-express搭建一个简单的网站(六)——用户模块和路由分析

时间:2023-04-06 00:19:47 HTML5

上一节解决了用户注册和登录数据的内容。本节开始分析用户模块和用户路由。##用户管理模块UserModule分析##UserModule主要代码如下:import{NgModule}from'@angular/core';从'@angular/common'导入{CommonModule};从'./login/login.import{LoginComponent}组件';从'./users/users.component'导入{UsersComponent};从'./users-routing.module'导入{UsersRoutingModule};从'./home/home.component'导入{HomeComponent};导入{RegistComponent}from'./regist/regist.component';@NgModule({imports:[CommonModule,FormsModule,ReactiveFormsModule,UsersRoutingModule,],declarations:[UsersComponent,LoginComponent,HomeComponent,RegistComponent,]})exportclassUsersModule{}import数组中,CommonModule:是构建子组件必须引入的模块。用户登录控件(LoginComponent)使用模板驱动的表单,需要导入FormsModule。用户注册组件(RegistComponent)使用响应式表单,需要导入ReactiveFormsModule。用户路由模块UsersRoutingModule主要代码如下:import{NgModule}from'@angular/core';import{RouterModule,Routes}from'@angular/router';import{LoginComponent}from'./login/login.component';从'./users/users.component'导入{UsersComponent};从'./home/home.component'导入{HomeComponent};从'./regist/regist.component'导入{RegistComponent};constusersRoutes:Routes=[{path:'',component:UsersComponent,children:[{path:'',component:HomeComponent},{path:'login',component:LoginComponent},{path:'regist',component:RegistComponent}]},];@NgModule({imports:[RouterModule.forChild(usersRoutes)],exports:[RouterModule]})exportclassUsersRoutingModule{}进入首页(localhost)时,因为AppRoutingModule被直接重定向到了users,直接进入users路由。进入用户路由后,直接加载用户模块的UsersRoutingModule。当路由为''时,加载UsersComponent组件。UsersComponent组件只有一个路由出口标签:users模块的所有组件都必须在这一对标签中呈现他的子路由包括{path:'',component:HomeComponent},{path:'login',component:LoginComponent},{path:'regist',component:RegistComponent}所以,最后的初始页面就是模板的HomeComponent组件内容:登录Regist

在这个模板的两个链接标签中,提供Navigate到登录和注册路由的routerLink:[routerLink]="['login'][routerLink]="['regist']"当点击Login标签时,会根据路由直接跳转到LoginComponent组件定义执行用户的登录操作。当点击Regist标签时,会根据路由定义直接跳转到RegistComponent组件进行用户注册操作。