事件繫結（Event Binding）

事件繫結基本上會監聽使用者的動作，透過事件的觸發來執行某個事情。

語法使用

app.component.html

<button (click)="do()" type="button" [disabled]="state===true">我是按鈕，你按得到嗎？</button>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  state = false;

  do() : void{
    alert('You Click Button.');
  }
}

這樣點按鈕就會執行 do() 這個 function。

$event 參數

一般在繫結與註冊事件的時候不必帶入參數，但是如果帶入參數可以獲得更多有關這個事件的訊息，把上面的程式碼修改一下：

app.component.html

<button (click)="do($event)" type="button" [disabled]="state===true">我是按鈕，你按得到嗎？</button>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  state = false;

  do($event) : void{
    alert('You Click Button.');
  }
}

點選之後就可以在 F12 上看到這些屬性。

這樣可以在設計的時候有其他的組合方式。