「Angular 2」のデータバインディングとディレクティブ記述法

次世代Webアプリケーションフレームワーク「Angular」の活用 第2回

Angular 2のイベント定義

　データバインディングの一種として、画面上のボタンが押された時などのイベントを定義できます。Angular 2でコントロールにイベントを定義するにはリスト5のように記述します。

リスト5　Angular 2のイベント定義（angular2-002-event/app/app.component.ts）

<!-- (click)属性でクリックイベントを定義 -->
<button (click)="onClickButton()">ボタン1</button>
<button (click)="onClickButtonWithEvent($event)">ボタン2</button>
<button (click)="onClickButtonWithEvent($event)">ボタン3</button>

　「(click)」のように、イベント名をカッコで囲んだ属性に、イベントを処理するメソッドを記述します。1行目のように引数なしの記述と、2〜3行目のようにイベントオブジェクト$eventを指定する記述ができます。

　メソッドの記述はAppComponentコンポーネントの定義内にリスト6のように行います。

リスト6　イベントハンドラの実装（angular2-002-event/app/app.component.ts）

export class AppComponent {
  /**
   * イベント引数なしのハンドラ ...（1）
   */
  onClickButton() {
    alert("ボタンが押されました");
  }
  /**
   * イベント引数ありのハンドラ ...（2）
   */
  onClickButtonWithEvent(event:any) {
    // targetプロパティでイベントを発生させたオブジェクトを取得 ...（3）
    var button = event.target;
    // ボタンのラベルをtextContentプロパティから取得して表示 ...（4）
    alert("ボタン「" + button.textContent + "」が押されました");
  }
}

　（1）はイベント引数なしの場合の処理です。ここではalertメソッドで固定のメッセージを表示しています。一方、（2）はイベント引数ありの場合の処理です。（3）でevent.targetプロパティからオブジェクト（ここではボタン）を取得し、ボタンオブジェクトから（4）でtextContentプロパティ（ボタンの文言）をalertメソッドで表示しています。

　リスト5、6を実行してボタン1を押すとリスト6（1）の処理、ボタン2とボタン3を押すとリスト6（2）の処理で、それぞれメッセージが表示されます。ボタン2とボタン3の場合、押されたボタンの文言がメッセージに反映されます。

図2　Angular 2のイベント定義（angular2-002-event）

　AngularJS 1でのリスト6と等価な記述はリスト7のようになります。(click)の代わりにng-click属性で記述します。

リスト7　AngularJS 1のイベント定義（angularjs1-samples/002-event.html）

<!-- ng-click属性でクリックイベントを定義 -->
<button ng-click="onClickButton()">ボタン1</button>
<button ng-click="onClickButtonWithEvent($event)">ボタン2</button>
<button ng-click="onClickButtonWithEvent($event)">ボタン3</button>