Question

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

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

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

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

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

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

所以，我的解释是：

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

Answer 4

我在another主题中找到并写过-这适用于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

角度

4 个答案: