Angular の (change) と (ngModelChange) の違い質問する

Question

(change)従来の入力変更イベントにバインドされたイベント。

https://developer.mozilla.org/en-US/docs/Web/イベント/変更

入力にモデルがない場合でも、(change)イベントを使用することができます。

<input (change)="somethingChanged()">

(ngModelChange)ngModel ディレクティブのです@Output。モデルが変更されたときに発生します。ngModel ディレクティブなしでこのイベントを使用することはできません。

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124

ソースコードをさらに調べていくと、(ngModelChange)新しい値が出力されます。

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169

つまり、次のような使用方法があるということです:

<input (ngModelChange)="modelChanged($event)">

modelChanged(newObj) {
    // do something with new value
}

基本的には両者に大きな違いはないように思えますが、ngModelを使用するとイベントの威力が増します[ngValue]。

  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData">
          {{data.name}}
      </option>
  </select>

dataChanged(newObj) {
    // here comes the object as parameter
}

ngModel「物」なしで同じことを試してみようと仮定する

<select (change)="changed($event)">
    <option *ngFor="let currentData of allData" [value]="currentData.id">
        {{data.name}}
    </option>
</select>

changed(e){
    // event comes as parameter, you'll have to find selectedData manually
    // by using e.target.data
}

Answer 1