~Linux、MySQLからAJAXまでAngular2でイベント処理Angular2でイベントバインディングを使ってイベントを処理する方法をまとめました。※Angular2の2.0.0版、TypeScriptを使って確認したものです。(デモはv4.4.3、v2.0.0で動作確認)※目次をクリックすると目次の下部にコンテンツが表示されます。event.target.value;}・”keyup”イベントが発生するとコンポーネントの”onKey”メソッドをコール。・イベントが発生すると、コンポーネントに渡された”$event”変数を介してアクセスする事ができる。・$event.targetによってHTMLInputElementにアクセスし、value属性のデータを取得できる。value;}・変数名の前に”#”付与してテンプレートリファレンス変数を定義する。・この変数を使って直接要素にアクセスできる。下記例では、ボタンをクリックするとイベントバインディングを使って”btnColor1′′という変数に’btn-success’というBootstrap3のCSSクラス名を設定しています。(click)=”btnColor1=’btn-success'”“btnColor1′′という変数は、NgClassディレクティブを使ってボタンのCSSを設定しているので、クリックするとボタンの色が変わります。他のイベントについても同様です。下記例では、$event変数を使ってイベントのタイプを取得し、イベントのタイプ毎に処理を切替えています。Red</label>1(change)=”color1=$event.target.value”・イベントバインディング・ユーザーのチェック動作を”change”イベントで検知し、$event変数を介して値を取得して”color1′′変数に保持。2[checked]=”color1==’red'”・プロパティバインディング・”color1変数が”red”の場合は、”checked”属性をtrueにする。Red</label>1#clr1・ローカルテンプレート変数を定義2(change)=”color2=clr1.value”・イベントバインディング・ユーザーのチェック動作を”change”イベントで検知し、ローカルテンプレート変数を介して値を取得して”color2′′変数に保持。3[checked]=”color2==’red'”・プロパティバインディング・”color2変数が”red”の場合は、”checked”属性をtrueにする。template:`<strong>1)マウスイベントを使ってボタンの色を変更</strong><p>ボタンにマウスを合わせる、離す、クリックすると色が変わります。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。