Angular-第4課-方法與點擊事件
使用手機App時，按下按鈕或清單上的項目，就會觸發新的動作，例如出現新畫面。而我們在第3課製作出了清單，這一課就讓網頁的清單項目在點擊時，也能夠有所反應。
課程關鍵字：#方法 #點擊事件 #CSS綁定
一、方法
方法中撰寫了用以完成工作的程式碼，它可以被別的方法呼叫。而在Angular中，還能夠在html檔中使用。宣告方法的Type Script語法如下：
方法名稱(需要的參數): 回傳值型態 {
程式碼...
}這一課要撰寫的程式是讓網頁中的清單項目被點擊時，能夠顯示該項目所對應的hero物件的資訊。回顧一下第2課利用了「插值綁定」，在html檔中顯示hero物件的id與name屬性，而本課也會用這種做法完成。
因此請開啟heroes.component.ts。在該類別中宣告一個Hero型態的變數，名稱為：selectedHero，且不給予初始值。這個變數是用來做插值用的。
變數名稱: 資料型態;selectedHero: Hero;
接著再撰寫名為「onSelect」的方法：
onSelect(hero: Hero): void {
this.selectedHero = hero;
}當這個方法被呼叫，會傳入一個hero物件作為參數。執行後，這個類別的「selectedHero」變數將被賦予值，於是能插值到html檔中。
二、點擊事件
開啟heroes.component.html，能看到先前是在<li>標籤中加入迴圈語法，產生多個清單項目。如今想在項目添加點擊事件，也該從<li>下手。於是我們在該標籤中加入語法，修改如下：
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">加上了「(click)=”onSelect(hero)”」，代表要設定點擊事件。一旦被點擊，就會觸發ts檔中的「onSelect」方法，並傳入該清單項目所屬的hero物件作為參數。於是上一節宣告的selectedHero變數就被賦予值。
Angular設定點擊事件，就像在Android的layout檔中可以為元件添加onClick屬性，而屬性值則是在Activity類別中，要呼叫的方法名稱。
接下來利用插值綁定將selectedHero插入到html檔中，來完成整個點擊事件的最終目標。請在heroes.component.html的下方添加如下的網頁元素：
<div *ngIf="selectedHero"><h2>{{selectedHero.name | uppercase}} Details</h2>
<div><span>id: </span>{{selectedHero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="selectedHero.name" placeholder="name">
</label>
</div></div>
中間的語法應該看起來不陌生，就是第3課包含的文字與文字輸入框。至於上方的「*ngIf=”selectedHero”」是一種判斷。如果selectedHero沒有被賦予值（undefined），就不載入這個<div>區塊。
儲存後重整網頁，試著點選一個項目，畫面下方確實出現Detail區塊。此外還能在文字輸入框進行編輯，並即時反應在文字與清單項目中。
三、CSS綁定
如果希望在清單中被點擊的項目，能夠有特別的樣式，可以利用Angular的「CSS綁定」。只要在<li>標籤加入語法即可：
[class.selected]="hero === selectedHero"如果某個清單項目所屬的hero，正好是ts檔中的selectedHero，那麼該<li>標籤便會套用css檔中的「.selected」樣式。而當點選另一個項目，因為selectedHero的值改變，於是不再套用特別樣式。
經過修改，本課最後的heroes.component.html會類似這個樣子：
