(更改)vs(ngModelChange)的角度

Question

Angular 1不接受onchange事件,但只接受onchange()事件.

另一方面,Angular 2接受两者ng-change()和(change)事件,它们似乎都在做同样的事情.

有什么不同？

哪一个最适合表现？

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

Answer 1

(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)">

基本上,似乎两者之间没有太大的区别,但ngModel事件在你使用时会获得力量[ngValue].

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

假设你没有" ngModel事物" 尝试同样的事情

  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData">
          {{data.name}}
      </option>
  </select>

Answer 2

在Angular 7中,(ngModelChange)="eventHandler()"将在[(ngModel)]="value"更改值绑定之前触发,将在更改绑定值之后(change)="eventHandler()"触发.[(ngModel)]="value"

Answer 3

正如我在另一个主题中找到并写的那样- 这适用于 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事件，这些事件需要按某种顺序执行。

总结：如果你放置ngModelChangebefore ngModel，你得到的$event作为新值，但你的模型对象仍然保持以前的值。 如果将它放在 之后ngModel，模型将已经具有新值。

来源

Answer 4

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

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

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

用法：

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

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

Answer 5

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

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

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

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

所以，我的解释是：

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