初探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的最大好處就在於提示,其次就是糾錯.

和上次同樣,咱們仍然以最後的運行結果來結束咱們本次的分享.

後續,咱們已經考慮到了視圖的重用,那麼對於數據接口也是能夠重用的,而且每每咱們的數據都不是寫死的,因此咱們更應該將咱們的數據接口給抽離出來,下一次,咱們分享用戶數據接口的抽離.