Angular 1 accepterer ikke onchange()
-hændelsen, den accepterer kun ng-change()
-hændelsen.
Angular 2 accepterer på den anden side både (change)
og (ngModelChange)
-hændelser, som begge synes at gøre det samme.
Hvad'er forskellen?
hvilken er bedst for ydelsen?
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)
-begivenhed bundet til en klassisk indgangsændringsbegivenhed.
https://developer.mozilla.org/en-US/docs/Web/Events/change
Du kan bruge (change)-begivenhed, selv om du ikke har en model ved dit input som
<input (change)="somethingChanged()">
(ngModelChange)
er @Output
af ngModel-direktivet. Det udløses, når modellen ændres. Du kan ikke bruge denne hændelse uden ngModel-direktivet.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124
Som du kan se mere om i kildekoden, udsender (ngModelChange)
den nye værdi.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169
Så det betyder, at du har mulighed for en sådan brug:
<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
// do something with new value
}
I bund og grund ser det ud til, at der ikke er nogen stor forskel mellem de to, men ngModel
-hændelser får mere magt, når du bruger [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
}
antager, at du prøver det samme uden "ngModel
ting"
<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
}
I Angular 7 udløses (ngModelChange)=&"eventHandler()"
før værdien bundet til [(ngModel)]="value"
ændres, mens (change)=&"eventHandler()"
udløses efter værdien bundet til [(ngModel)]=&"value"
ændres.
Som jeg har fundet og skrevet i et andet emne - dette gælder for angular < 7 (jeg er ikke sikker på hvordan det er i 7+)
Bare for fremtiden
skal vi observere, at [(ngModel)]="hero.name" er bare en genvej, der kan de-sugeriseres til: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".
Så hvis vi afsukker koden, ville vi ende op med:
Hvis vi nu får en kode, hvis vi laver en kode, så får vi et bedre resultat: <select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">
eller
<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()"">
Hvis du inspicerer ovenstående kode, vil du bemærke, at vi ender med 2 ngModelChange-hændelser, og disse skal udføres i en vis rækkefølge.
Sammenfattende: Hvis du placerer ngModelChange før ngModel, får du $event som den nye værdi, men dit modelobjekt har stadig den tidligere værdi. Hvis du placerer den efter ngModel, har modellen allerede den nye værdi.