(change) vs (ngModelChange) im Winkel

Winkel 1 akzeptiert kein onchange()Ereignis, sondern nur ng-change()Ereignis.

Angular 2 hingegen akzeptiert sowohl Ereignisse (change)als auch (ngModelChange)Ereignisse, die beide dasselbe zu tun scheinen.

Was ist der Unterschied?

Welches ist am besten für die Leistung?

ngModelChange :

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

vs change :

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

(change) Ereignis, das an das klassische Eingabeänderungsereignis gebunden ist.

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

Sie können das Ereignis (Ändern) verwenden, auch wenn Sie kein Modell als Eingabe haben

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

(ngModelChange)ist die @OutputDirektive von ngModel. Es wird ausgelöst, wenn sich das Modell ändert. Sie können dieses Ereignis nicht ohne die Anweisung ngModel verwenden.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124

Wenn Sie mehr im Quellcode entdecken, wird (ngModelChange)der neue Wert ausgegeben.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169

Es bedeutet also, dass Sie die Möglichkeit einer solchen Verwendung haben:

<input (ngModelChange)="modelChanged($event)">

modelChanged(newObj) {
    // do something with new value
}

Grundsätzlich scheint es keinen großen Unterschied zwischen zwei zu geben, aber ngModelEreignisse gewinnen an Kraft, wenn Sie sie verwenden [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
}

Angenommen, Sie versuchen dasselbe ohne " ngModelDinge".

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

In Winkel 7 wird der (ngModelChange)="eventHandler()"Wille ausgelöst, bevor der gebundene Wert [(ngModel)]="value"geändert wird, während der (change)="eventHandler()"Wille ausgelöst wird, nachdem der gebundene Wert [(ngModel)]="value"geändert wurde.

Wie ich in einem anderen Thema gefunden und geschrieben habe - dies gilt für Winkel <7 (nicht sicher, wie es in 7+ ist)

Nur für die Zukunft

Wir müssen beachten, dass dies [(ngModel)]="hero.name"nur eine Abkürzung ist, die entzuckert werden kann : [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Wenn wir also den Code entzuckern, würden wir am Ende Folgendes haben:

<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">

oder

<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">

Wenn Sie den obigen Code überprüfen, werden Sie feststellen, dass wir am Ende zwei ngModelChangeEreignisse haben, die in einer bestimmten Reihenfolge ausgeführt werden müssen.

Zusammenfassend: Wenn Sie ngModelChangezuvor platzieren ngModel, erhalten Sie den $eventWert als neuen Wert, aber Ihr Modellobjekt enthält weiterhin den vorherigen Wert. Wenn Sie es danach platzieren ngModel, hat das Modell bereits den neuen Wert.

QUELLE

1 - (change) ist an das HTML onchange-Ereignis gebunden. In der Dokumentation zu HTML onchange heißt es:

Führen Sie ein JavaScript aus, wenn ein Benutzer die ausgewählte Option eines <select>Elements ändert

Quelle: https://www.w3schools.com/jsref/event_onchange.asp

2 - Wie bereits erwähnt, (ngModelChange)ist an die Modellvariable gebunden, die an Ihre Eingabe gebunden ist.

Meine Interpretation lautet also:

• (change)wird ausgelöst, wenn der Benutzer die Eingabe ändert
• (ngModelChange) Wird ausgelöst, wenn sich das Modell ändert, unabhängig davon, ob es einer Benutzeraktion folgt oder nicht