"Angular 1" nepriima įvykio onchange()
, jis priima tik įvykį ng-change()
.
Kita vertus, "Angular 2" priima ir (change)
, ir (ngModelChange)
įvykius, kurie, atrodo, daro tą patį.
Koks skirtumas?
Kuris iš jų yra geriausias našumo atžvilgiu?
ngModelChange:
<input type="text" pInputText class="ui-widget ui-text"
(ngModelChange)="clearFilter()" placeholder="Find"/>
prieš pakeitimą:
<input type="text" pInputText class="ui-widget ui-text"
(change)="clearFilter()" placeholder="Find"/>
(pokytis)
įvykis, susietas su klasikiniu įvesties pokyčio įvykiu.
https://developer.mozilla.org/en-US/docs/Web/Events/change
Galite naudoti (pokyčio) įvykį, net jei neturite įvesties modelio, nes
<input (change)="somethingChanged()">
(ngModelChange)
yra ngModel direktyvos @Output
. Ji suveikia, kai pasikeičia modelis. Šio įvykio negalima naudoti be ngModel direktyvos.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124
Kaip sužinosite daugiau iš pradinio kodo, (ngModelChange)
išsiunčia naują reikšmę.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169
Taigi tai reiškia, kad turite tokio naudojimo galimybę:
<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
// do something with new value
}
Iš esmės atrodo, kad didelio skirtumo tarp jų nėra, tačiau ngModel
įvykiai įgauna daugiau galios, kai naudojate [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
}
daryti prielaidą, kad jūs bandote tą patį be "ngModel
dalykų"
<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" sistemoje (ngModelChange)="eventHandler()"
įvyks prieš pakeičiant reikšmę, susietą su [(ngModel)]="value"
, o (change)="eventHandler()"
įvyks po reikšmės, susietos su [(ngModel)]="value"
, pakeitimo.
Kaip aš radau ir parašė kita tema - tai taikoma angular < 7 (nežinau, kaip tai yra 7+)
Tiesiog ateičiai
reikia pastebėti, kad [(ngModel)]="hero.name" yra tik sutrumpintas kelias, kuris gali būti de-sugretinamas į: (ngModelChange)="hero.name" (ngModelChange)="hero.name = $event".
Taigi, jei išbrauktume kodą, gautume:
<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">
arba
<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">
Peržiūrėję pirmiau pateiktą kodą pastebėsite, kad galiausiai turime 2 ngModelChange įvykius, kurie turi būti vykdomi tam tikra tvarka.
Apibendrinant: Jei ngModelChange atliksite prieš ngModel, gausite $event kaip naują reikšmę, tačiau jūsų modelio objektas vis dar turės ankstesnę reikšmę. Jei jį patalpinsite po ngModel, modelio objektas jau turės naują vertę.