javascript - (change) vs (ngModelChange) in Angular

Angular 1 akzeptiert das onchange()-Ereignis nicht, es akzeptiert nur das ng-change()-Ereignis.

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

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 ändern:

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

Antwort #1

(change)-Ereignis an klassisches Eingabeänderungsereignis gebunden.

https://developer.mozilla.org/de/docs/Web/Events/change

Sie können das (change) Ereignis verwenden, auch wenn Sie kein Modell an Ihrem Eingabefeld haben, wie

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

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

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

Wenn Sie im Quellcode mehr entdecken, sendet (ngModelChange) den neuen Wert aus.

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

Also bedeutet das, dass du die Fähigkeit zu einer solchen Verwendung hast:

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

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

Im Grunde scheint es keinen großen Unterschied zwischen den beiden zu geben, aber ngModel-Events gewinnen an Bedeutung, wenn man [ngValue] verwendet.

  <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, du versuchst dasselbe ohne „ngModel Dinge“

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

Antwort #2

In Angular 7 wird das (ngModelChange)="eventHandler()" vor der Änderung des an [(ngModel)]="value" gebundenen Wertes ausgelöst, während das (change)="eventHandler()" nach der Änderung des an [(ngModel)]="value" gebundenen Wertes ausgelöst wird.

Antwort #3

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

Nur für die Zukunft

wir müssen beobachten, dass [(ngModel)]="hero.name" nur eine Abkürzung ist, die zu folgendem aufgelöst werden kann: [ngModel]="hero.name" (ngModelChange)="hero.name=$event".

Wenn wir also den Code von Zucker befreien, würden wir Folgendes erhalten:

<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 untersuchen, werden Sie feststellen, dass wir mit 2 ngModelChange-Ereignissen enden und diese in einer bestimmten Reihenfolge ausgeführt werden müssen.

Zusammenfassung: Wenn Sie ngModelChange vor ngModel platzieren, erhalten Sie das $event als neuen Wert, aber Ihr Modellobjekt enthält immer noch den vorherigen Wert. Wenn Sie es nach ngModel platzieren, hat das Modell bereits den neuen Wert.

QUELLE

Antwort #4

1 - (change) ist an das HTML-onchange-Ereignis gebunden. Die Dokumentation über HTML onchange sagt Folgendes:

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 zuvor erwähnt, ist (ngModelChange) an die Modellvariable gebunden, die an Ihr Eingabefeld gebunden ist.

Also, meine Interpretation ist:

(change) wird ausgelöst, wenn der Benutzer die Eingabe ändert
(ngModelChange) wird ausgelöst, wenn sich das Modell ändert, unabhängig davon, ob dies auf eine Benutzeraktion zurückzuführen ist oder nicht

Antwort #5

Nach meiner Erfahrung haben (change) und (ngModelChange) zwei verschiedene Verwendungszwecke.

(ngModelChange) wird ausgelöst, wenn HTML gerendert wird, der Benutzer den Wert dieses Elements geändert hat.
(change) wird ausgelöst, wenn der Benutzer den Wert ändert und das Element verlässt.

Verwendung :

(ngModelChange): wenn Sie kritische Dinge haben, die vom HTML abhängen, müssen Sie jede Art von Änderungen, die Sie behandeln müssen, berücksichtigen.
(change): Wenn Sie nur Werteänderungen behandeln müssen, die vom Benutzer vorgenommen wurden.