Angular 1 akzeptiert das Ereignis onchange nicht, sondern nur das Ereignis ng-change
.
Winkel 2 hingegen akzeptiert beide Ereignisse (change)
und (ngModelChange)
, 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 ändern:
<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 event auch dann verwenden (ändern), wenn Sie kein Modell als eingegeben haben
<input (change)="somethingChanged()">
(ngModelChange)
ist der @Output
der ngModel-Direktive. 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
Wie Sie im Quellcode erfahren, gibt (ngModelChange)
den neuen Wert aus.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169
Das bedeutet, dass Sie über die folgenden Nutzungsmöglichkeiten verfügen:
<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
// do something with new value
}
Grundsätzlich scheint es keinen großen Unterschied zwischen zwei zu geben, aber ngModel
Ereignisse erhalten die Kraft, wenn Sie [ngValue]
verwenden.
<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 "ngModel
things".
<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 Angular 7 wird der (ngModelChange)="eventHandler()"
ausgelöst vor der an [(ngModel)]="value"
gebundene Wert wird geändert, während der (change)="eventHandler()"
ausgelöst after Der an [(ngModel)]="value"
gebundene Wert wird geändert.
Wie ich in ein anderes Thema gefunden und geschrieben habe - dies gilt für angular <7 (nicht sicher, wie es in 7+ ist)
Nur für die Zukunft
wir müssen beachten, dass [(ngModel)] = "hero.name" nur eine Abkürzung ist, die entzuckert werden kann zu: [ngModel] = "hero.name" (ngModelChange) = "hero.name = $ event ".
Wenn wir also den Zuckercode entfernen, erhalten wir:
<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 es am Ende zu 2 ngModelChange-Ereignissen kommt, die in einer bestimmten Reihenfolge ausgeführt werden müssen.
Fazit: Wenn Sie ngModelChange vor ngModel platzieren, wird das $ -Ereignis als neuer Wert angezeigt, das Modellobjekt behält jedoch weiterhin den vorherigen Wert. Wenn Sie platzieren Nach ngModel hat das Modell bereits den neuen Wert.