angular 中的（更改）与（ngModelChange）

Question

Angular1不接受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"/>

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

基本上，两者之间似乎没有太大区别，但是 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
}

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 事件，这些事件需要按某种顺序执行。

总结：如果您将 ngModelChange 放在 ngModel 之前，您将获得 $event 作为新值，但您的模型对象仍保留以前的值。 如果将它放在 ngModel 之后，模型将已经具有新值。

SOURCE

Answer 4

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

Execute a JavaScript when a user changes the selected option of a <select> element

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

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

所以，我的解释是：

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

Answer 5

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

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

用法：

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

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

angular 中的（更改）与（ngModelChange）

(change) vs (ngModelChange) in angular

html

javascript

typescript

angular

angular-ngmodelchange