在前幾次分享中,因爲代碼比較簡單,量也不多,所以我們使用命令行和vi進行編輯,從這次開始,我們使用vs code來編寫我們的代碼,此處略過vs code的安裝過程.
第一步,我們使用 ng generate component user-detail命令來生成一個詳情模塊.在vs code 中我們用Ctrl+Shift+P 打開命令窗口,選ng generate,之後選component,最後輸入我們組建的名稱user-detailbr/> 
我們現在將我們用戶詳情信息轉移到user-detail目錄下的user-detail.component.html裏(左圖),並且在user-detail.component.ts裏聲明user的屬性(右圖),這裏有點小小的改動,就是將原來的selectUser改爲了userVO,以便於之後用戶詳情模塊的複用.並且因爲再這個模塊裏,所要展示的用戶是從外面傳過來的,所以我們要給userVO這個屬性加上@Input()這個修飾符.
詳情模塊我們已經準備好了,我們現在在列表頁引入我們的詳情模塊,並注入userVO對象.首先是引入app-user-detail標籤,並在提示中選userVO,最終效果如右圖所示,給組件注入對象,我們使用的是[對象名]=”對象”,這樣的語法格式,使用ide的最大好處就在於提示,其次就是糾錯.
和上次一樣,我們仍然以最後的運行結果來結束我們本次的分享.
後續,我們已經考慮到了視圖的重用,那麼對於數據接口也是可以重用的,並且往往我們的數據都不是寫死的,所以我們更應該將我們的數據接口給抽離出來,下一次,我們分享用戶數據接口的抽離.