Angularで遊ぶ(3) - データバインディング - イベントバインディング

フロントの動作の核心、イベントの扱いでございましょう。

app.component.htmlはこんな感じ

<!-- イベントバインディングの例 -->
<input type="button" (click)="setCTime($event)" value="現在時刻" />{{ctime}}

<hr />

<!-- キーボードイベントの例 -->
<form>
  <label for="key">キー入力:</label>
  <input id="key" name="key" (keydown)="keylog($event)" />
</form>
<div>キーコード:{{which}}</div>
<div [hidden]="!altKey">[Alt]</div>
<div [hidden]="!ctrlKey">[Ctrl]</div>
<div [hidden]="!shiftKey">[Shift]</div>

<hr />

<!-- エンターキーは特別のイベントがある -->
<input #rev type="text" (keyup.enter)="reverse(rev.value)" value=""/>
「{{reversed_input}}」

<hr />

<!-- テンプレート参照変数はテンプレートの別の位置から参照できる -->
<label>姓:<input #last type="text" (change)="0" /></label><br />
<label>名:<input #first type="text" (change)="0" /></label>
<div>こんにちは、{{last.value}}{{first.value}}さん！</div>

app.component.tsです

export class AppComponent {
  ctime = "---"

  setCTime(e: MouseEvent){
    this.ctime = new Date().toLocaleString();
    console.log(e);
  }

  which = '';
  altKey = false;
  ctrlKey = false;
  shiftKey = false;
  
  keylog(e: any){
    this.which = e.which;
    this.altKey = e.altKey;
    this.ctrlKey = e.ctrlKey;
    this.shiftKey = e.shiftKey;
  }

  reversed_input = 'ooo';

  reverse(input: String){
    this.reversed_input = input.split('').reverse().join("");
  }
}

これは画面を見ないと意味ないですわね。 操作したあと、こんな感じになる。

1つ目は普通にボタンを押したら、イベントハンドラが動くというもの。 イベントを渡すには$eventというオブジェクトを渡すお約束。 ちゃんと渡っているか、console.log()で出して確認してる。

2つ目はキーボードを入力するごとにそのコードを表示するもの。 これが出来ればまあ何でもできる。

3つ目はエンターキーを押したイベントを取るもの。 2つ目と同じようにしてもいいけど、これはよくやるので特別なイベントが設定されてる。 イベントハンドラに渡したいものがはっきりしているのであれば、 イベントオブジェクトのtargetから要素をたどるのではなく、 テンプレートの特定の要素を変数に詰めてイベントハンドラに渡すことができる。 それが#付きの記法で、テンプレート参照変数という。

4つ目はテンプレート参照変数の使い方の例。 変数は他の要素の位置で使えるので、入力値を余所で使いたいだけなら イベントハンドラを書くまでもない。 ただし、入力した値を変数にバインドするタイミングがわからないと困るので ダミーのイベント設定をする。それが(change)="0"で、これを書いておくと changeイベントが起きたときに変数に値が入る。 うーん、これは便利だね