[新手教程-4] Angular的主從元件開發

創立hero-detail元件

在前一篇新手教程3-使用angular的迴圈及判斷式等功能裡,我們在顯示selectedHero的資訊時是與列表寫在同一個頁面
但如果顯示詳細資訊的地方有需要額外拆分出來,可以在創立一個元件,並將selectedHero傳入元件

寫入hero-detail的內容

開啟檔案src/app/hero-detail/hero-detail.component.html,這邊會將selectedHero的名稱改為hero

讓元件能接受外部傳送物件進來

開啟src/app/hero-detail/hero-detail.component.ts

在hero-detail.component.ts裡面,hero一定要以@Input來宣告這個物件

而在HeroesComponent裡,則會以下面的宣告來將hero的值傳入

現在我們打開heroes.component.html,修改後的網頁內容會如下

今日練習的範例連結:live example / download example

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *