チュートリアルをやってみて何となく掴んだAngular2のイベントについてのまとめ。keyupとかclickとか簡単なもの。

Angular2 DEVELOPER GUIDES
3. User Input
https://angular.io/docs/ts/latest/guide/user-input.html

ビルトインのイベント

1系

<input ng-keyup="func()" ...

2だとこうなる

記法

(イベント名)="評価する式"

<input (keyup)="func()" ...

$event

1系と同じく$eventがある。
$event.targetでHTMLInputElementが取得できる。

<input (keyup)="func($event)" ...

func(event){
    this.value = event.target.value;
}

$eventの代わりにテンプレートの変数を使う

inputをテンプレート内の変数として宣言する。
$eventを使うよりもこっちが推奨されている。

<input #input (keyup)="func(input)" ...

func(input){
    this.value = input.value;
}

Enterキーイベント

Enterキーに反応するイベントがサポートされるようになった。

<input #input (keyup.enter)="func(input)" ...

カスタムイベント

1系

ディレクティブ内で渡された関数を実行する。例えばこんな感じ。

.directive('sample', function(){
    return {
        scope: {
            greeting: '&'
        },
        link: function(scope){
            scope.greeting({message:'hello'});
        }
    };
})

2だとどうなる？

上記の例をAngular2のComponentで定義してみる。
独自のタイミングでイベントを発生させるには EventEmitter でカスタムイベントを定義する。

ボタンクリックでイベントを発火するComponent

import {... ,EventEmitter} from 'angular2/angular2';

@Component({
  selector: 'greeting',
  events: ['greetingMessage']
})
@View({
  template: `
    <button class="btn btn-default btn-sm" (click)="greeting('hello')">hello</button>
  `
})
export class GreetingComponent {
  private greetingMessage = new EventEmitter();

  greeting(message) { 
    this.greetingMessage.next(message);
  }
}

まずEventEmitterの定義をangular2/coreからインポート。

import {... ,EventEmitter} from 'angular2/angular2';

インスタンスを作成する。
この時のインスタンス名がイベント名となる。

private greetingMessage = new EventEmitter();

EventEmitter.next()でイベントが発火する。

this.greetingMessage.next(message);

イベント発火を検知する上位Component

@Component({
  selector: 'my-app'
})
@View({
  template: `
    <greeting (greeting-message)="onGreeting($event)"></greeting>
    <p>{{message}}</p>
  `,
  directives: [GreetingComponent]
})
class AppComponent {
  onGreeting(event){
    this.message = event;
  }
}

GreetingComponentで定義したカスタムイベント(greeting-message)が使えるようになる。(CamelCaseはハイフンにする必要がある)

<greeting (greeting-message)="onGreeting($event)">

.next()に渡したパラメータを受け取れる。

onGreeting(event){}

plunker

Outputアノテーション

通常はEventEmitterの名前=イベント名になるが、変更する事ができる。

import {... ,Output} from 'angular2/angular2';

@Component({
  ...
})
@View({
  template: `
    ...
  `
})
export class GreetingComponent {
  @Output('greeting') greetingMessage = new EventEmitter();

  greeting(message) { 
    ...
  }
}

イベント名をgreetingに変更。

@Output('greeting') greetingMessage = new EventEmitter();

上位Componentも検知するイベント名をgreetingに変更する。

@View({
  template: `
    <greeting (greeting)="onGreeting($event)"></greeting>
    ...
  `