摘要:上一節(jié)解決了用戶注冊(cè)和登錄數(shù)據(jù)部分的內(nèi)容。這一節(jié)開(kāi)始分析用戶模塊用戶路由。用戶管理模塊分析主要代碼如下數(shù)組中,是構(gòu)建子組件必須引入的模塊。當(dāng)點(diǎn)擊標(biāo)簽時(shí),根據(jù)路由定義直接跳轉(zhuǎn)到組件,進(jìn)行用戶的注冊(cè)操作。
上一節(jié)解決了用戶注冊(cè)和登錄數(shù)據(jù)部分的內(nèi)容。這一節(jié)開(kāi)始分析用戶模塊、用戶路由。## 用戶管理模塊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òng)表單,需要導(dǎo)入FormsModule,用戶注冊(cè)組件(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)入主頁(yè)(localhost)時(shí),因?yàn)锳ppRoutingModule中直接重定向到users,所以直接進(jìn)入到了users的路由,進(jìn)入users路由后,直接加載了users模塊的UsersRoutingModule,當(dāng)路由為""時(shí),加載UsersComponent組件,UsersComponent組件只有一個(gè)路由插座標(biāo)簽:
所有users模塊的組件都要在這對(duì)標(biāo)簽中呈現(xiàn)。他的子路由包括
{path:"", component:HomeComponent}, {path: "login", component: LoginComponent}, {path:"regist",component:RegistComponent}
所以,最終的初始頁(yè)面為HomeComponent組件的模板內(nèi)容:
在這個(gè)模板中的兩個(gè)鏈接標(biāo)簽中,分別提供了導(dǎo)航到登錄和注冊(cè)路由的routerLink:
[routerLink]="["login"]
[routerLink]="["regist"]"
當(dāng)點(diǎn)擊Login標(biāo)簽時(shí),根據(jù)路由定義直接跳轉(zhuǎn)到LoginComponent組件,進(jìn)行用戶的登錄操作。
當(dāng)點(diǎn)擊Regist標(biāo)簽時(shí),根據(jù)路由定義直接跳轉(zhuǎn)到RegistComponent組件,進(jìn)行用戶的注冊(cè)操作。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/93144.html
摘要:我們從這一章開(kāi)始分析這個(gè)好友模塊。在中提供了和一個(gè)請(qǐng)求攔截器,分別用于提供數(shù)據(jù)服務(wù)路由守衛(wèi)服務(wù)和攔截服務(wù)。在這個(gè)模塊下共有三個(gè)組件。路由路由模塊負(fù)責(zé)整個(gè)模塊的全部路由。和,對(duì)應(yīng)同一個(gè)組件,當(dāng)導(dǎo)航到路徑時(shí),,的為具體的。 上一章講解了用戶登錄的相關(guān)代碼。用戶登錄成功后,就會(huì)進(jìn)入好友模塊,在好友模塊中會(huì)根據(jù)不同的用戶ID顯示相應(yīng)的好友列表,點(diǎn)擊好友列表中的單個(gè)好友就會(huì)進(jìn)入編輯單個(gè)好友頁(yè)面,...
摘要:為了做到這一點(diǎn),我創(chuàng)建了一個(gè)服務(wù)提供商,通過(guò)的消息推送來(lái)實(shí)現(xiàn)。最后聲明一個(gè)來(lái)發(fā)送修改過(guò)的對(duì)象。根組件,創(chuàng)建它并插入宿主頁(yè)面。路由的作用是在找不到任何路由時(shí),訪問(wèn)組件。定義路由數(shù)組后,用裝飾器導(dǎo)入,并將路由數(shù)組傳遞給的數(shù)組。 上一篇文章對(duì)用戶發(fā)來(lái)的注冊(cè)和登錄信息進(jìn)行了處理,并實(shí)現(xiàn)了將注冊(cè)用戶信息插入到mysql數(shù)據(jù)庫(kù)的數(shù)據(jù)表和從mysql數(shù)據(jù)庫(kù)的數(shù)據(jù)表中查詢到用戶的登錄信息并返回用戶認(rèn)證...
閱讀 1993·2021-11-24 10:45
閱讀 1850·2021-10-09 09:43
閱讀 1291·2021-09-22 15:38
閱讀 1219·2021-08-18 10:19
閱讀 2837·2019-08-30 15:55
閱讀 3057·2019-08-30 12:45
閱讀 2962·2019-08-30 11:25
閱讀 356·2019-08-29 11:30