[解決済み] (変更) vs (ngModelChange) in angular

質問

Angular 1は以下のものを受け付けません。 onchange() イベントのみを受け付けます。 ng-change() イベントと同じです。

一方、Angular 2は、以下の両方の機能を受け入れます。 (change) と (ngModelChange) というイベントがあり、どちらも同じことをやっているように見えます。

何が違うのでしょうか？

性能的に優れているのはどちらですか？

ngModelChange :

<input type="text" pInputText class="ui-widget ui-text"
    (ngModelChange)="clearFilter()" placeholder="Find"/>

対 変化 :

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>

解決方法は？

(change) イベントを古典的な入力変更イベントにバインドしています。

https://developer.mozilla.org/en-US/docs/Web/Events/change

入力にモデルがなくても、(change) イベントを利用することができます。

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

(ngModelChange) は @Output ngModelディレクティブの モデルが変更されたときに起動されます。このイベントは 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
}

基本的には、2つの間に大きな違いはないように思えますが 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
}