Angular2-user-input
提供:Dev Guides
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ボタンをクリックすると、次の出力が表示されます。