Angular 2 で同等の OnChange

1. Angular 2 の OnChange プロパティ
2. Angular 2 の OnChange に相当

Angular イベントバインディングは、DOM イベントに応答するための優れた方法です。これにより、コードを要素のネイティブのクリックイベントまたは入力イベントにバインドし、それらが発生したときに実行できます。

OnChanges は Angular プロジェクトの入力パラメーターの変更を監視するために使用でき、Angular 2 で同等の OnChanges を入力フィールド、ボタンクリック、リストアイテム、さらにはこの記事で説明するスクロールイベントに使用できます。。

Angular 2 の OnChange プロパティ

Angular 2.0 には双方向のデータバインディングがあります。入力フィールドへの変更はすぐに UI に反映され、その逆も同様です。

Onchange は、Angular 2 の入力要素のプロパティであり、ユーザーが入力するか、ドロップダウンリストから値を選択したときに何が起こるかを指定します。

構文：

ngOnChanges(changes: SimpleChanges)

引数 SimpleChanges がメソッド ngOnChanges() に渡され、変更後に新しい入力値と以前の入力値が返されます。

入力ユーザーオブジェクトのデータ型を使用する場合、ngOnChanges() は、親コンポーネント内のオブジェクトのリンクが変更された場合にのみ呼び出されます。

入力ユーザーオブジェクトの属性の値を変更するだけでは、ngOnChanges() メソッドは実行されません。

Angular 2 の OnChange に相当

OnChanges イベントは、入力の値が変更されたときに実行されるライフサイクルフックです。ngModel ディレクティブは、入力または textarea 要素を現在のスコープのプロパティにバインドし、Angular 2 でサポートされている HTML5onchange イベントを置き換えます。

ngModelChange イベントは、モデルが更新され、その値が変更されたときに発生します。式を ngModel ディレクティブに渡すか、入力にバインドすることで起動できます。

サンプルコード-HTML：

<div>
  <input [value]="first" (change)="changeFn($event)">
  <p>{{ first }}</p>
  <input [ngModel]="second" (ngModelChange)="modelChangeFn($event)">
  <p>{{ second }}</p>
</div>

サンプルコード-TypeScript：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  first = '1';
  second = '2';
  changeFn(abc) {
    this.first = abc.target.value;
  }
  modelChangeFn(abc: string) {
    this.second = abc;
  }
}

出力：

changeFn() は、ユーザーが入力をぼかした場合にのみ実行されます。一方、ユーザーが入力の値を入力、貼り付け、または編集すると、ModelChangeFn() はイベントをリッスンし、オブジェクトを設定します。

上記のコードを実行するには、ここををクリックしてください。