448

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"/>
4

5 回答 5

643

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

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

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

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

(ngModelChange)是@OutputngModel 指令。它在模型更改时触发。如果没有 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
}
于 2017-07-13T08:16:08.597 回答
128

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

于 2018-12-27T00:30:21.240 回答
43

正如我在另一个主题中找到并写的那样 - 这适用于 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，模型就已经有了新的值。

资源

于 2019-07-25T11:00:46.763 回答
13

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

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

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

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

所以，我的解释是：

  • (change)当用户更改输入时触发
  • (ngModelChange)在模型更改时触发，无论是否与用户操作连续
于 2020-02-20T13:46:59.363 回答
2

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

  1. (ngModelChange)当 HTML 呈现时触发，用户更改了该元素的值。

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

用法：

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

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

于 2021-11-09T13:54:02.770 回答