angular中的(change) vs (ngModelChange)

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"/>
909679 次浏览
小开
最佳答案

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

基本上，两者之间似乎没有太大的区别，但当你使用[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东西”

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

在Angular 7中，(ngModelChange)="eventHandler()"将触发之前(绑定到[(ngModel)]="value"的值被改变)，而(change)="eventHandler()"将触发后(绑定到[(ngModel)]="value"的值被改变)。

小开

正如我在另一个 topic中找到并写的那样——这适用于angular <7(不知道7+是怎么回事)

只是为了未来

我们需要注意到[(ngModel)]="hero.name"只是一个可以去糖到[ngModel]="hero.name" (ngModelChange)="hero.name = $event"的捷径。

所以如果我们去糖编码，我们最终会得到:

<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">

或

<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">

如果你检查上面的代码，你会注意到我们结束了2 ngModelChange事件，这些事件需要按某种顺序执行。

如果你把ngModelChange放在ngModel之前，你会得到$event作为新值，但你的模型对象仍然保留以前的值。 如果你把它放在ngModel之后，模型将已经有了新值

SOURCE

小开

1 - (change)绑定到HTML的onchange事件。关于HTML onchange的文档说明如下:

当用户更改<select>元素的选定选项时执行JavaScript

来源:https://www.w3schools.com/jsref/event_onchange.asp

如前所述，(ngModelChange)绑定到绑定到输入的模型变量。

所以，我的解释是:

  • 当用户改变输入时触发(change)
  • (ngModelChange)在模型改变时触发，不管它是否连续于用户操作
小开

根据我的经验，(change)和(ngModelChange)有两种不同的用法。

  1. (ngModelChange)在HTML渲染时触发，用户改变了该元素的值。

  2. (change)当用户更改值并保留元素焦点时触发。

用法:

  1. (ngModelChange):当你有关键的东西依赖于html时，你必须处理任何类型的更改。
  2. (change):当你必须只处理用户所做的值更改时。

注意:使用(ngModelChange)时要小心，因为有时它会给你最大调用堆栈问题，你的表单会卡住。


提交答案