Angular 2 ユーザー入力

ユーザーがリンクをクリックしたり、ボタンを押したり、文字を入力したりすると、これらのユーザーの操作によって DOM イベントがトリガーされます。

この章では、Angular のイベントバインディング構文を使用してこれらのイベントをバインドする方法を学びます。

以下のGIF画像は、この例の動作を示しています：

ソースコードは記事の最後からダウンロードできます。

ユーザー入力イベントへのバインド

Angular のイベントバインディングの仕組みを使用して、あらゆる DOM イベントに応答できます。

以下の例では、クリックイベントをバインドしています：

<button (click)="onClickMe()">点我!</button>

等号の左側の (click) は、そのボタンのクリックイベントをバインドターゲットとして表します。等号の右側、引用符内のテキストはテンプレートステートメントです。

完全なコードは次のとおりです：

app/click-me.component.ts ファイル：

import { Component } from '@angular/core'; @Component({ selector: 'click-me', template: ` <button (click)="onClickMe()">クリック！</button> {{clickMessage}}` }) export class ClickMeComponent { clickMessage = ''; onClickMe() { this.clickMessage = 'サンプル！'; } }

$event オブジェクトによるユーザー入力の取得

あらゆるタイプのイベントにバインドできます。

入力ボックスの keyup イベントにバインドして、ユーザーが入力した内容を画面にエコーバックしてみましょう。

app/keyup.component.ts (v1) ファイル：

@Component({ selector: 'key-up1', template: ` <input (keyup)="onKey($event)"> <p>{{values}}</p> ` }) export class KeyUpComponent_v1 { values = ''; /*// 弱い型付け onKey(event:any) { this.values += event.target.value + ' | '; }*/ //強い型付け onKey(event: KeyboardEvent) { this.values += (<HTMLInputElement>event.target).value + ' | '; } }

上記のコードでは、イベントをリッスンしてユーザー入力をキャプチャしています。Angular はイベントオブジェクトを $event 変数に格納します。

コンポーネントの onKey() メソッドは、イベントオブジェクトからユーザー入力を抽出し、入力された値を values プロパティに累積加算するために使用します。

テンプレート参照変数からのユーザー入力の取得

ローカルテンプレート変数を使用してユーザーデータを表示できます。テンプレート参照変数は、識別子の前にハッシュ記号（#）を付けることで実現されます。

以下の例は、ローカルテンプレート変数の使用方法を示しています：

app/loop-back.component.ts ファイル：

@Component({ selector: 'loop-back', template: ` <input #box (keyup)="0"> <p>{{box.value}}</p> ` }) export class LoopbackComponent { }

私たちは<input>要素上に、...という名前のboxテンプレート参照変数を定義しました。box変数が参照しているのは<input>要素そのものです。つまり、input 要素のvalue値を取得し、補間式を使ってそれを<p>タグ内に表示します。

テンプレート参照変数を使用して、上記の keyup の例を修正できます：

app/keyup.components.ts (v2) ファイル：

@Component({ selector: 'key-up2', template: ` <input #box (keyup)="onKey(box.value)"> <p>{{values}}</p> ` }) export class KeyUpComponent_v2 { values = ''; onKey(value: string) { this.values += value + ' | '; } }

キーイベントのフィルタリング（key.enter による）

ユーザーが Enter キーを押したときだけ、入力ボックスの値を取得できます。

(keyup) イベントハンドラは、すべてのキー入力を検知します。たとえば各 $event.keyCode を確認するなどしてキー入力をフィルタリングし、Enter キーが押されたときだけ values プロパティを更新できます。

Angular はキーボードイベントをフィルタリングできます。Angular の keyup.enter 疑似イベントにバインドすることで、Enter キーのイベントをリッスンします。

app/keyup.components.ts (v3)：

@Component({ selector: 'key-up3', template: ` <input #box (keyup.enter)="values=box.value"> <p>{{values}}</p> ` }) export class KeyUpComponent_v3 { values = ''; }

blur（フォーカス喪失）イベント

次に、blur（フォーカス喪失）イベントを使用できます。これは、要素がフォーカスを失った後に values プロパティを更新できます。

以下の例では、Enter キーの入力イベントと入力ボックスのフォーカス喪失イベントの両方をリッスンします。

app/keyup.components.ts (v4)：

@Component({ selector: 'key-up4', template: ` <input #box (keyup.enter)="values=box.value" (blur)="values=box.value"> <p>{{values}}</p> ` }) export class KeyUpComponent_v4 { values = ''; }

この記事で使用したソースコードは、以下の方法でダウンロードできます（node_modules と typings ディレクトリは含まれません）。

ソースコードのダウンロード

その他の拡張