（变化）与（ngModelChange）角度答案

【问题标题】：(change) vs (ngModelChange) in angular（变化）与（ngModelChange）角度
【发布时间】：2017-12-04 01:49:16
【问题描述】：

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

【问题讨论】：

我不想比较这些。我只想知道哪一个最适合性能？
是的，没有可比性。如果您使用的是 ngModel ，则可以使用后者，否则使用第一个。它总是首选避免使用 ngModel，因为这是双向数据绑定，因此对性能不利
编辑强调“有什么区别”和“哪个更高效”以消除主观性并投票重新开放。
在 Angular 7 中， (ngModelChange)="eventHandler()" 将在绑定到 [(ngModel)]="value" 的值更改之前触发，而 (change)="eventHandler() " 将在绑定到 [(ngModel)]="value" 的值更改后触发。
顺便说一下，只有当焦点离开输入时才会触发 (change) 事件。如果您希望在每次按键后触发一个事件，您可以使用 (input) 事件。

标签： javascript html angular typescript angular-ngmodelchange

【解决方案1】：

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

https://developer.mozilla.org/en-US/docs/Web/Events/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 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
}

【讨论】：

如果我对 ngmodel 对象使用 change 事件会发生什么？
@RameshRajendran 我改进了答案。你仍然可以对 ngModel 对象使用 change 事件，但是 change 事件传递事件参数，ngModelChange 事件传递新值。
是的 +1 。但是我对 ngmodelchange 有一个问题，当您使用 ctr + A 从文本框中清除所有值时。然后 ngModelChange 不会触发。
<input (ngModelChange)="modelChanged($event)"> 不对，[ngModel] 是必填项。
有些事情，你不能做(change)，在这种情况下，你可以做(onClick)="yourFunction(youParameter)"

【解决方案2】：

在 Angular 7 中，(ngModelChange)="eventHandler()" 将触发 before 绑定到 [(ngModel)]="value" 的值更改，而 (change)="eventHandler()" 将触发 after 绑定到 @ 的值987654326@改了。

【讨论】：

我刚刚在 Angular 7.1 中进行了测试，并且在调用事件之前更新了 ngModel 的值。所以这就是我使用的
不是反过来吗？根据 Angular Docs ngModelChange 在视图模型更新后触发。
在最新的 Angular 文档中描述了这种情况：angular.io/guide/…
在 Angular 7.2 中，确实会触发 (ngModelChange) 事件之前值更改和(change) 之后它已更改。感谢您提供的信息，非常有帮助！
为什么有人希望在绑定到模型的值发生变化之前触发函数？

【解决方案3】：

正如我在 another 主题中找到并写的那样 - 这适用于 angular

只为未来

我们需要注意[(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

【讨论】：

感谢您指出这一点！在找到您的解释之前，我遇到了这个问题
这让我很开心！我不知道 ngModel 的顺序，而 ngModelChange 会改变行为。非常感谢
ngModel 和 ngModelChange 的顺序在 angular 10+ 中仍然相关。多么糟糕的陷阱！
怎么是hero.name = $event而不是hero.name = $event.value？
对不起，我的意思是$event.target.value而不是$event.value

【解决方案4】：

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

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

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

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

所以，我的解释是：

(change) 在用户更改输入时触发
(ngModelChange) 在模型更改时触发，无论是否与用户操作连续

【讨论】：

【解决方案5】：

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

(ngModelChange) 在 HTML 呈现时触发，用户更改了该元素的值。
(change) 在用户更改值并离开元素焦点时触发。

用法：

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

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

【讨论】：

这也是我在测试中也意识到的。这非常重要，因为如果您想减少开销，您可以使用更改，因为它仅在用户离开输入焦点并且发生更改时触发。谢谢。
正确，感谢您的评论这将有助于其他人理解