Angular 2-ユーザー入力

Angular 2では、HTMLのDOM要素構造を使用して、実行時に要素の値を変更できます。詳細を見てみましょう。

入力タグ

app.component.tsファイルに次のコードを配置します。

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

@Component ({
   selector: 'my-app',
   template: '
      <div>
         <input [value] = "name" (input) = "name = $event.target.value">
         {{name}}
      </div>

})
export class AppComponent { }

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

[値] =”ユーザー名” -これは、式ユーザー名を入力要素の値プロパティにバインドするために使用されます。
*（input）=” expression” *-これは、入力要素の入力イベントに式をバインドする宣言的な方法です。
username = $ event.target.value -入力イベントが発生したときに実行される式。
$ event -Angularによるイベントバインディングで公開される式で、イベントのペイロードの値を持ちます。

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

これで何でも入力でき、同じ入力が入力コントロールの横のテキストに反映されます。

入力タグ

入力をクリック

app.component.tsファイルに次のコードを配置します。

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

@Component ({
   selector: 'my-app',
   template: '<button (click) = "onClickMe()"> Click Me </button> {{clickMessage}}'
})

export class AppComponent {
   clickMessage = 'Hello';
   onClickMe() {
      this.clickMessage = 'This tutorial!';
   }
}

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

クリックして

Click Meボタンをクリックすると、次の出力が表示されます。

Click me Button

Angular2-user-input

Angular 2-ユーザー入力

入力タグ

入力をクリック