Angular2入門教學(3) - click事件與函式呼叫

今天來試試常用點擊呼叫函式的功能在Angular2上要怎麼實作

首先在要想點擊的元素上打上(click)="函式名稱"

<button (click)="call()">呼叫</button>

上面的要呼叫的函式名稱為call，然後到.ts檔中建立一個call的函式

@Component({
  selector: 'my-app',
  templateUrl: './Demo/index.html',
})
export class DemoComponent {
  call() {
    alert('被呼叫了');
    //...處理內容
  }
}

如此一來就能從html點擊元素時呼叫.ts檔的函式
當然要傳遞參數也是可以的
在.html加上要傳遞的參數(click)="call('100')"

<button (click)="call('100')">呼叫</button>

在.ts則宣告接收參數money:any

call(money:any) {
   alert('被呼叫了');
   //...處理內容
}

值得一提的是，接收的參數要指定型態
不知道的時後可以先用any，即任何型態皆可
但為了在日後偵錯維護上容易，最好還是改成指定的型態
所以我們這邊就改成string

call(money:string) {
  alert("你給了" + money);  
}

如此一來按下按鈕就會彈出"你給了100"的警告視窗

初學時看教學文章，即使一個小步驟沒打，也容易會不知道怎麼往下做
故以下影片是一步一步做的，以補文章的不足

本範例檔案