Angular 2-イベントの処理

Angular 2では、ボタンクリックなどのイベントやその他の種類のイベントも非常に簡単に処理できます。イベントはhtmlページからトリガーされ、さらに処理するためにAngular JSクラスに送信されます。

イベント処理を実現する方法の例を見てみましょう。この例では、クリックボタンとステータスプロパティの表示を見ていきます。最初は、ステータスプロパティがtrueになります。ボタンがクリックされると、ステータスプロパティがfalseになります。

ステップ1 *-app.component.tsファイルのコードを次のように変更します。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   Status: boolean = true;
   clicked(event) {
      this.Status = false;
   }
}

上記のコードについて、次の点に注意する必要があります。

最初は真であるブール型のステータスと呼ばれる変数を定義しています。
次に、HTMLページでボタンがクリックされるたびに呼び出される、クリックされた関数を定義しています。関数では、Statusプロパティの値をtrueからfalseに変更します。

ステップ2 *-テンプレートファイルであるapp/app.componentlファイルに次の変更を加えます。

<div>
   {{Status}}
   <button (click) = "clicked()">Click</button>
</div>

上記のコードについて、次の点に注意する必要があります。

最初に、クラスのStatusプロパティの値を表示しています。
次に、Clickの値でボタンhtmlタグを定義しています。次に、クラスのclickedイベントに対してボタンのクリックイベントがトリガーされるようにします。

ステップ3 *-すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

Trueをクリック

ステップ4 *-クリックボタンをクリックすると、次の出力が表示されます。

Falseをクリック

Angular2-handling-events

Angular 2-イベントの処理