Angular-第5課-組件的模組化
在上一課，我們讓一個組件負責顯示清單和顯示詳情這兩件事。在大型專案中，這種做法會使人不容易維護。本課沒有要開發新的功能，而是要拆解上述的組件，讓每個組件只做特定的工作，達到模組化的目標。
課程關鍵字：#模組化 #屬性綁定
一、準備新的html檔
本課要將「顯示詳情」這個工作拆解出來，讓另一個專屬的組件來負責。因此請建立新的組件，名稱為：hero-detail。
ng generate component hero-detail//The new command requires to be run outside of a project, but a project definition was found at "angular.json".
一樣會產生組件的資料夾，裡面有html檔、css檔和ts檔。
現在我們將前面製作的heroes.component.html，下方用來顯示詳情的語法，貼到新產生的hero-detail.component.html中。並且把「selectedHero」改成「hero」，最後內容會變成這樣子：
<div *ngIf="hero"><h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name"/>
</label>
</div></div>
將selectedHero改為hero是一種維護的手法。在目前的專案，插值進來的物件確實是「被點選的hero」沒錯。但若這個組件以後會在其他地方被重複使用呢？在每個場合都以selectedHero來稱呼就顯得奇怪了！所以才會取名為hero這種比較通用的名字。
二、準備新的ts檔
在ts檔中，需要有變數能插值到html檔。請在hero-detail.component.ts宣告Hero物件，名稱為hero。並且在前面加上一個新的標記：@Input。
此標記需要被匯入進來，在VS Code開發工具可以點旁邊的小燈泡來匯入。
@Input() hero: Hero;上面的@Input標記，能夠讓外部的組件「輸入」資料進來。有了資料，便能透過插值綁定，插入在負責顯示詳情的html檔中。
三、放置新的組件
這一節要將剛剛完成的hero-detail組件放置在heroes組件中，這樣heroes組件就能將顯示詳情的工作「交付」給hero-detail組件負責。
開啟heroes.component.html，在最下方，也就是原先顯示詳情的位置，將新的組件放置好。
<app-hero-detail [hero]="selectedHero"></app-hero-detail>這裡複習一下，hero-detail.component.ts檔中的@Component標記裡，selector屬性定義了組件在別的html檔被放置時，所要使用的標籤名稱。
標籤中多了一個「[hero]=”selectedHero”」，這是Angular的「屬性綁定」語法。意思是，將被放置組件的hero變數，綁定到目前組件的selectedHero變數上。這同時也需要ts檔中的@Input標記配合，才能接收資料。
整個資料流動的過程是這樣的：清單項目被點擊，使得selectedHero被賦予值。同時由於「屬性綁定」的效果，selectedHero的值會輸入到目標組件ts檔的hero變數。再透過插值綁定，hero-detail的html檔即可顯示資料。
四、拆解組件的好處
將heroes.component.html用來顯示詳情的部分拆解出去，能使這個組件變得簡潔一些。這就和撰寫如Java之類的其他程式，會將篇幅大的程式碼適當地切成小方法是一樣的。講正式一點就是「模組化」。
另外，每個組件都有它獨特的功能，因此可以重複使用。如果其他地方也需要顯示hero詳情的功能，只要仿照本課的作法，在html檔放置該組件，並設定好屬性綁定即可。
