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

在上一篇博文《Angular6.x---使用者列表與詳情展示》中,我們用ngFor=”let object of list”實現了使用者列表的展示,並通過(click)=”onSelect(obj)”語法實現了列表單擊時將單擊的物件傳到後臺的功能,最後為了防止初次載入物件為空導致的錯誤,我們又使用了ngIf語法來對要展示的詳情物件進行判空操作.但隨著後續模組的增多,以及業務的交叉,我們發現這樣的程式碼組織形式不利於複用,並且當我們修改使用者詳情的時候,可能還會導致列表出現錯誤,所以我們今天來說明一下在angular6.x中,如何將詳情與列表展示分開.
  
 在前幾次分享中,因為程式碼比較簡單,量也不多,所以我們使用命令列和vi進行編輯,從這次開始,我們使用vs code來編寫我們的程式碼,此處略過vs code的安裝過程.

  第一步,我們使用 ng generate component user-detail命令來生成一個詳情模組.在vs code 中我們用Ctrl+Shift+P 開啟命令視窗,選ng generate,之後選component,最後輸入我們組建的名稱user-detail      

  我們現在將我們使用者詳情資訊轉移到user-detail目錄下的user-detail.component.html裡(左圖),並且在user-detail.component.ts裡宣告user的屬性(右圖),這裡有點小小的改動,就是將原來的selectUser改為了userVO,以便於之後使用者詳情模組的複用.並且因為再這個模組裡,所要展示的使用者是從外面傳過來的,所以我們要給userVO這個屬性加上@Input()這個修飾符.   

  詳情模組我們已經準備好了,我們現在在列表頁引入我們的詳情模組,並注入userVO物件.首先是引入app-user-detail標籤,並在提示中選userVO,最終效果如右圖所示,給元件注入物件,我們使用的是[物件名]=”物件”,這樣的語法格式,使用ide的最大好處就在於提示,其次就是糾錯.   

  和上次一樣,我們仍然以最後的執行結果來結束我們本次的分享.   

  後續,我們已經考慮到了檢視的重用,那麼對於資料介面也是可以重用的,並且往往我們的資料都不是寫死的,所以我們更應該將我們的資料介面給抽離出來,下一次,我們分享使用者資料介面的抽離.