关于javascript：(change)vs(ngModelChange)in angular


(change) vs (ngModelChange) in angular

Angular 1不接受onchange()事件，仅接受ng-change()事件。

另一方面，Angular 2接受(change)和(ngModelChange)事件，它们似乎都在做相同的事情。

有什么不同？

哪个最适合表现？

ngModelChange：

1
2
<input type="text" pInputText class="ui-widget ui-text"
    (ngModelChange)="clearFilter()" placeholder="Find"/>

vs变化：

1
2
<input type="text" pInputText class="ui-widget ui-text"
    (change)="clearFilter()" placeholder="Find"/>
相关讨论

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

https://developer.mozilla.org/zh-CN/docs/Web/Events/change

即使输入中没有模型，您也可以使用(更改)事件，如下所示：

1
<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

因此，这意味着您具有这种用法的能力：

1
<input (ngModelChange)="modelChanged($event)">
1
2
3
modelChanged(newObj) {
    // do something with new value
}

基本上，两者似乎没有什么大的区别，但是当您使用[ngValue]时，ngModel事件会获得力量。

1
2
3
4
5
  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData">
          {{data.name}}
      </option>
  </select>
1
2
3
dataChanged(newObj) {
    // here comes the object as parameter
}

假设您尝试了没有" ngModel事物"的相同事物

1
2
3
4
5
<select (change)="changed($event)">
    <option *ngFor="let currentData of allData" [value]="currentData.id">
        {{data.name}}
    </option>
</select>
1
2
3
4
changed(e){
    // event comes as parameter, you'll have to find selectedData manually
    // by using e.target.data
}
相关讨论

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

相关讨论

正如我在另一个主题中找到并写的那样-这适用于angular <7(不确定在7+中的效果如何)

为了未来

我们需要观察到[(ngModel)]="hero.name"只是可以简化为[ngModel]="hero.name" (ngModelChange)="hero.name = $event"的捷径。

因此，如果我们将代码去糖化，最终结果将是：

element

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

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

所以，我的解释是：

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