(change) vs (ngModelChange) 角度

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

即使您的輸入中沒有模型，您也可以使用 (change) 事件作為

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

(ngModelChange)是@Output ngModel指令。 當模型改變時它會觸發。 如果沒有 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
}

基本上，兩者之間似乎沒有太大區別，但是當您使用[ngValue]時， ngModel事件會獲得強大的力量。

  <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" ： [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之后，模型就會有新的值。

來源

Answer 4

1 - (change)綁定到 HTML onchange 事件。 關於 HTML onchange 的文檔說明如下：

當用戶更改<select>元素的選定選項時執行 JavaScript

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

2 -如前所述， (ngModelChange)綁定到綁定到您輸入的模型變量。

所以，我的解釋是：

• (change)當用戶改變輸入時觸發
• (ngModelChange)在模型更改時觸發，無論是否與用戶操作連續

Answer 5

根據我的經驗(change)和(ngModelChange)有兩種不同的用法。

1. (ngModelChange)在 HTML 呈現時觸發，用戶更改了該元素的值。

2. (change)當用戶更改值並離開元素焦點時觸發。

用法：

1. (ngModelChange) ：當您有關鍵的事情依賴於 html 時，您必須處理任何類型的更改。
2. (change) ：當您只需要處理用戶所做的值更改時。

注意：使用(ngModelChange)要小心，因為有時它會給您帶來最大的調用堆棧問題，並且您的表單會卡住。