Angular2入門教學(6) - (event)與事件綁定

在Html頁面上綁定相對應的事件，也是常用到的功能
本次就介紹在Angular2如何實作事件綁定的功能

用法相當的簡單就是在你想綁定的事件名稱用()包起來即可，等式右側則是動作

<button type="button" (click)="tme()">按我</button>

至於事件名稱可以參考這個連結
.ts部份寫個對應的函式

tme() {
  alert("被按了");
}

如此當點擊按鈕時便會跳出警告視窗

再來一些小範例吧
先設計一個黑色的小區塊

<div style="background-color: black;width: 300px;height: 300px;"></div>

然後試著綁定滑鼠進入(mouseover)與離開(mouseleave)事件，下方單向榜定一個變數

<div (mouseover)="over()" (mouseleave)="leave()"
style="background-color: black;width: 300px;height: 300px;"></div>
{{message}}

並在.ts裡寫上對應的函式

message = "沒事";
over() {
  this.message = "進來了>///<";
}
leave() {
  this.message = "離開了...";
}

如此滑鼠經過與離開黑色的區塊，下方的文字也會跟著改變

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

本範例檔案