（变化）与（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"/>

与 变化：

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

原文由 Ramesh Rajendran 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

即使您的输入没有模型，您也可以使用（更改）事件

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

(ngModelChange) 是 @Output 指令的 @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
 }

基本上，两者之间似乎没有太大区别，但是当您使用 [ngValue] 时， ngModel 事件会获得力量。

 <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 things”的情况下尝试同样的事情

<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
 }

原文由 omeralper 发布，翻译遵循 CC BY-SA 4.0 许可协议