（更改）与（ngModelChange）在角度中

javascript html typescript angular angular-ngmodelchange

2022-08-29 23:12:53

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

另一方面，Angular 2同时接受和事件，两者似乎都在做同样的事情。(change)(ngModelChange)

有什么区别？

哪一个最适合性能？

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

答案 1

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

https://developer.mozilla.org/en-US/docs/Web/Events/change

您可以使用（更改）事件，即使您的输入中没有模型

<input (change)="somethingChanged()">

(ngModelChange)是 ngModel 指令。当模型更改时，它将触发。如果没有 ngModel 指令，则不能使用此事件。@Output

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
}

答案 2

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

（更改） 与 （ngModelChange） 在角度中

（更改）与（ngModelChange）在角度中