Angular 1 ei hyväksy onchange()
-tapahtumaa, se hyväksyy vain ng-change()
-tapahtuman.
Angular 2 puolestaan hyväksyy sekä (change)
- että (ngModelChange)
-tapahtumat, jotka molemmat näyttävät tekevän saman asian.
Mitä eroa on?
Kumpi on suorituskyvyn kannalta paras?
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)
-tapahtuma, joka on sidottu klassiseen syötteen muutostapahtumaan.
https://developer.mozilla.org/en-US/docs/Web/Events/change
Voit käyttää (change)-tapahtumaa, vaikka sinulla ei olisi mallia syötteessäsi, koska
<input (change)="somethingChanged()">
(ngModelChange)
on ngModel-direktiivin @Tulos
. Se laukeaa, kun malli muuttuu. Et voi käyttää tätä tapahtumaa ilman ngModel-direktiiviä.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124
Kuten huomaat lähdekoodista, (ngModelChange)
lähettää uuden arvon.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169
Se tarkoittaa siis, että sinulla on kyky tällaiseen käyttöön:
<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
// do something with new value
}
Periaatteessa näyttää siltä, että näiden kahden välillä ei ole suurta eroa, mutta ngModel
-tapahtumat saavat lisää tehoa, kun käytät [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
}
olettaa, että yrität samaa asiaa ilman "ngModel
asioita"
<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
}
Angular 7:ssä (ngModelChange)="eventHandler()"
laukeaa ennen kuin [(ngModel)]="value"
:iin sidottu arvo muuttuu, kun taas (change)="eventHandler()"
laukeaa jälkeen kuin [(ngModel)]="value"
:iin sidottu arvo muuttuu.
Kuten olen löytänyt ja kirjoitti toinen aihe - tämä koskee kulmikas < 7 (ei ole varma, miten se on 7+)
Vain tulevaisuutta varten
meidän on huomioitava, että [(ngModel)]="hero.name" on vain oikotie, joka voidaan purkaa: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".
Jos siis sokeroimme koodin, tuloksena olisi:
<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">
<`.
tai
<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">
Jos tarkastelet yllä olevaa koodia, huomaat, että meillä on lopulta 2 ngModelChange-tapahtumaa, ja ne on suoritettava jossakin järjestyksessä.
Yhteenveto: Jos asetat ngModelChange-tapahtuman ennen ngModel-tapahtumaa, saat $event-tapahtuman uutena arvona, mutta malliobjekti pitää edelleen hallussaan edellisen arvon. Jos sijoitat sen ngModel:n jälkeen, mallilla on jo uusi arvo.