（change）vs（ngModelChange）（角度）

Question

Angular 1不接受onchange()事件，它只接受ng-change()事件。

另一方面，Angular 2接受(change)和(ngModelChange)事件，这两者似乎在做同一件事。

有什么不同吗？

哪一个性能最好？

NGModelChange：

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

vs变化：

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

Answer 1

绑定到经典输入更改事件的(change)事件。

https://developer.mozilla.org/en-us/docs/web/events/change

即使在输入端没有模型，也可以使用（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
}