javascript - （变化）vs（ngModelChange）的角度((change) vs (ngModelChange) in angular)

Question

Angular 1 does not accept onchange() event, it's only accepts ng-change() event.

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

Angular 2, on the other hand, accepts both (change) and (ngModelChange) events, which both seems to be doing the same thing.

(另一方面，Angular 2接受(change)和(ngModelChange)事件，它们似乎都在做相同的事情。)

What's the difference?

(有什么不同？)

which one is best for performance?

(哪个最适合表现？)

ngModelChange :

(ngModelChange ：)

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

vs change :

(vs 变化 ：)

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

  ask by Ramesh Rajendran translate from so

Answer 1

(change) event bound to classical input change event.

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

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

(https://developer.mozilla.org/zh-CN/docs/Web/Events/change)

You can use (change) event even if you don't have a model at your input as

(即使输入中没有模型，您也可以使用（更改）事件，如下所示：)

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

(ngModelChange) is the @Output of ngModel directive.

((ngModelChange)是@Output ngModel的指令。)

It fires when the model changes.

(模型更改时将触发。)

You cannot use this event without ngModel directive.

(如果没有ngModel指令，则无法使用此事件。)

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

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

As you discover more in the source code, (ngModelChange) emits the new value.

(当您在源代码中发现更多信息时， (ngModelChange)会发出新值。)

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

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

So it means you have ability of such usage:

(因此，这意味着您具有这种用法的能力：)

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

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

Basically, it seems like there is no big difference between two, but ngModel events gains the power when you use [ngValue] .

(基本上，两者似乎没有什么大的区别，但是当您使用[ngValue]时， 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
}

assume you try the same thing without " ngModel things"

(假设您在没有“ 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
}