初探Angular6.x---主從組件

FingerLiu 發(fā)布于2019-08-19 11:06 / 3092人閱讀

摘要：在上一篇博文用戶列表與詳情展示中我們用實(shí)現(xiàn)了用戶列表的展示并通過(guò)語(yǔ)法實(shí)現(xiàn)了列表單擊時(shí)將單擊的對(duì)象傳到后臺(tái)的功能最后為了防止初次加載對(duì)象為空導(dǎo)致的錯(cuò)誤我們又使用了語(yǔ)法來(lái)對(duì)要展示的詳情對(duì)象進(jìn)行判空操作但隨著后續(xù)模塊的增多以及業(yè)務(wù)的交叉我們

　　　在上一篇博文《Angular6.x---用戶列表與詳情展示》中,我們用ngFor=”let object of list”實(shí)現(xiàn)了用戶列表的展示,并通過(guò)(click)=”onSelect(obj)”語(yǔ)法實(shí)現(xiàn)了列表單擊時(shí)將單擊的對(duì)象傳到后臺(tái)的功能,最后為了防止初次加載對(duì)象為空導(dǎo)致的錯(cuò)誤,我們又使用了ngIf語(yǔ)法來(lái)對(duì)要展示的詳情對(duì)象進(jìn)行判空操作.但隨著后續(xù)模塊的增多,以及業(yè)務(wù)的交叉,我們發(fā)現(xiàn)這樣的代碼組織形式不利于復(fù)用,并且當(dāng)我們修改用戶詳情的時(shí)候,可能還會(huì)導(dǎo)致列表出現(xiàn)錯(cuò)誤,所以我們今天來(lái)說(shuō)明一下在angular6.x中,如何將詳情與列表展示分開(kāi).
　　
　　在前幾次分享中,因?yàn)榇a比較簡(jiǎn)單,量也不多,所以我們使用命令行和vi進(jìn)行編輯,從這次開(kāi)始,我們使用vs code來(lái)編寫我們的代碼,此處略過(guò)vs code的安裝過(guò)程.
　　
　　第一步,我們使用 ng generate component user-detail命令來(lái)生成一個(gè)詳情模塊.在vs code 中我們用Ctrl+Shift+P 打開(kāi)命令窗口,選ng generate,之后選component,最后輸入我們組建的名稱user-detail
　　

　　我們現(xiàn)在將我們用戶詳情信息轉(zhuǎn)移到user-detail目錄下的user-detail.component.html里(左圖),并且在user-detail.component.ts里聲明user的屬性(右圖),這里有點(diǎn)小小的改動(dòng),就是將原來(lái)的selectUser改為了userVO,以便于之后用戶詳情模塊的復(fù)用.并且因?yàn)樵龠@個(gè)模塊里,所要展示的用戶是從外面?zhèn)鬟^(guò)來(lái)的,所以我們要給userVO這個(gè)屬性加上@Input()這個(gè)修飾符.
　　

　　詳情模塊我們已經(jīng)準(zhǔn)備好了,我們現(xiàn)在在列表頁(yè)引入我們的詳情模塊,并注入userVO對(duì)象.首先是引入app-user-detail標(biāo)簽,并在提示中選userVO,最終效果如右圖所示,給組件注入對(duì)象,我們使用的是[對(duì)象名]=”對(duì)象”,這樣的語(yǔ)法格式,使用ide的最大好處就在于提示,其次就是糾錯(cuò).
　　

　　和上次一樣,我們?nèi)匀灰宰詈蟮倪\(yùn)行結(jié)果來(lái)結(jié)束我們本次的分享.
　　

　　后續(xù),我們已經(jīng)考慮到了視圖的重用,那么對(duì)于數(shù)據(jù)接口也是可以重用的,并且往往我們的數(shù)據(jù)都不是寫死的,所以我們更應(yīng)該將我們的數(shù)據(jù)接口給抽離出來(lái),下一次,我們分享用戶數(shù)據(jù)接口的抽離.