第一步,我們使用 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()這個修飾符.
和上次一樣,我們仍然以最後的執行結果來結束我們本次的分享.
後續,我們已經考慮到了檢視的重用,那麼對於資料介面也是可以重用的,並且往往我們的資料都不是寫死的,所以我們更應該將我們的資料介面給抽離出來,下一次,我們分享使用者資料介面的抽離.
初探Angular6 x 主從元件
在前幾次分享中,因為 比較簡單,量也不多,所以我們使用命令列和vi進行編輯,從這次開始,我們使用vs code來編寫我們的 此處略過vs code的安裝過程.第一步,我們使用 ng generate component user detail命令來生成乙個詳情模組.在vs code 中我們用ctrl...
Angular8 X 元件理解
元件封裝的意義 需要重用或者簡化邏輯。命令列建立指令 ng generate g component c components componentname.ps 可以手動加入index.ts進一步方便匯入元件，以及隔離內部變化對外部的影響。目錄結構如下 components index.ts ind...
angular 初探之父子元件之間傳遞資料
當乙個元件封裝好後，卻由於在元件裡處理過多的資料，而這些資料每個使用這個元件的人都可能不同的時候，那麼封裝就是不合理的。所以將更多的處理和資料的呼叫給與外部是很有必要的。vue中通過屬性和子元件事件的觸發實現父子元件之間的通訊，angular也是如此，只是寫法略有不同。子元件中 son.ts inp...