Angular2-イベントの処理
Angular 2では、ボタンクリックやその他の種類のイベントなどのイベントも非常に簡単に処理できます。イベントはhtmlページからトリガーされ、さらに処理するためにAngularJSクラスに送信されます。
イベント処理を実現する方法の例を見てみましょう。この例では、クリックボタンとステータスプロパティの表示を見ていきます。最初は、statusプロパティはtrueになります。ボタンがクリックされると、statusプロパティはfalseになります。
Step 1 −app.component.tsファイルのコードを次のように変更します。
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
Status: boolean = true;
clicked(event) {
this.Status = false;
}
}
上記のコードについては、以下の点に注意する必要があります。
最初はtrueであるブール型のステータスと呼ばれる変数を定義しています。
次に、HTMLページでボタンがクリックされるたびに呼び出されるクリックされた関数を定義します。この関数では、Statusプロパティの値をtrueからfalseに変更します。
Step 2 −テンプレートファイルであるapp /app.component.htmlファイルに以下の変更を加えます。
<div>
{{Status}}
<button (click) = "clicked()">Click</button>
</div>
上記のコードについては、以下の点に注意する必要があります。
まず、クラスのStatusプロパティの値を表示します。
次に、Clickの値を使用してボタンのhtmlタグを定義しています。次に、ボタンのクリックイベントがクラスのクリックイベントにトリガーされることを確認します。
Step 3 −すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。
Step 4 − [クリック]ボタンをクリックすると、次の出力が得られます。