イベント・バインディング

Angular のイベントバインディングを用いて、 コンポーネントのテンプレートと、イベントハンドラとなる関数を接続することができます。

書き方は (イベント名) です。

では、さっそく「プロパティ・バインディング」から引き続き、 RectComponent を改造して、イベントバインディングも使ってみましょう。

まずは RectComponent クラスに、onClicked 関数を用意します。この関数に渡したパラメータの true/false で、 このオブジェクトのプロパティ isRounded の値をセットします。

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

@Component({
  selector: 'rect',
  templateUrl: './rect.component.html',
  styleUrls: ['./rect.component.css']
})
export class RectComponent {
  message: string;
  isRounded: boolean;
  fontColor: string;

  constructor(){
    this.message = "Hello, world!";
    this.isRounded = true;
    this.fontColor = "blue";
  }

  onClicked(isRounded: boolean){
    this.isRounded = isRounded;
  }
}

次にテンプレートを次のように書き換えます。(click) のところで、click イベントに対するイベントハンドラを設定しています。 ここではハンドラ名だけではなくて、パラメータの true や false も渡しています。

<div class='a' [class.rounded]="isRounded" [style.color]="fontColor">
  {{message}}
</div>
<p>Rounded:
  <button (click)="onClicked(true)">True</button>
  <button (click)="onClicked(false)">False</button>
</p>

False の方のボタンをクリックすると、そのイベントハンドラとして onClicked が false を引数として呼ばれます。onClicked 関数内では、 引数の値を isRounded プロパティにセットします。

引数のローカル変数は何も付けない isRounded で、プロパティの isRounded は this.isRounded です。

プロパティ isRounded はプロパティ・バインディングで、[class.rounded] とバインドされていて、CSS クラス rounded をセットするか ON/OFF します。

以上で、ボタンをクリックすることで、角の丸みが ON/OFF される仕組みが作れました。

$event オブジェクトでイベントオブジェクトを取得

ここでは DOM イベントに対するハンドラを設定していますが、DOM イベントでは通常ハンドラの第一引数として、 Event インターフェイスを実装したオブジェクトが渡されます。実際にどんなオブジェクトであるかは、イベントの種類によって異なり、そこから取得できる情報も異なります。

Angular において、 Event オブジェクトをハンドラで取得するために $event オブジェクトが定義されています。

上記のボタンのテンプレートを次のように書き換えます。

<div class='a' [class.rounded]="isRounded" [style.color]="fontColor">
  {{message}}
</div>
<p>Rounded:
  <button (click)="onClicked($event, true)">True</button>
  <button (click)="onClicked($event, false)">False</button>
</p>

ポイントは onClicked に $event を渡しているところです。

RectComponent での onClicked は次のように書き換え、第一パラメータでイベントオブジェクトを受けとります。

  ...
  onClicked(event: any, isRounded: boolean){
    console.log( event );
    this.isRounded = isRounded;
  }

}

ここでは event という変数でイベントオブジェクトを受け取っています。型は any 型としておきます。

テンプレートでは $event という名前である必要がありますが、関数の定義では event という変数名である必要はありません。

console.log でコンソールに出力するようにして、実行すると次のような結果となりました。

MouseEvent が渡されたことがわかりました。