Angular 1 onchange()
olayını kabul etmez, sadece ng-change()
olayını kabul eder.
Angular 2 ise hem (change)
hem de (ngModelChange)
olaylarını kabul ediyor ve her ikisi de aynı şeyi yapıyor gibi görünüyor.
Aradaki fark nedir?
performans için hangisi en iyisidir?
ngModelChange:
<input type="text" pInputText class="ui-widget ui-text"
(ngModelChange)="clearFilter()" placeholder="Find"/>
vs değişim:
<input type="text" pInputText class="ui-widget ui-text"
(change)="clearFilter()" placeholder="Find"/>
Klasik girdi değişikliği olayına bağlı (change)
olayı.
https://developer.mozilla.org/en-US/docs/Web/Events/change
Girişinizde bir model olmasa bile (change) olayını şu şekilde kullanabilirsiniz
<input (change)="somethingChanged()">
(ngModelChange)
ngModel yönergesinin @Output
öğesidir. Model değiştiğinde ateşlenir. Bu olayı ngModel yönergesi olmadan kullanamazsınız.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124
Kaynak kodda daha fazla keşfedeceğiniz gibi, (ngModelChange)
yeni değeri yayar.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169
Yani bu tür bir kullanım yeteneğiniz var demektir:
<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
// do something with new value
}
Temel olarak, ikisi arasında büyük bir fark yok gibi görünüyor, ancak [ngValue]
kullandığınızda ngModel
olayları güç kazanıyor.
<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
}
aynı şeyi "ngModel
şeyleri" olmadan denediğinizi varsayalım;
<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'de, (ngModelChange)="eventHandler()"
, [(ngModel)]="value"
öğesine bağlı değer değiştirilmeden önce, (change)="eventHandler()"
ise [(ngModel)]="value"
öğesine bağlı değer değiştirildikten sonra ateşlenecektir.
Bulduğum ve başka konuda yazdığım gibi - bu angular < 7 için geçerlidir (7+'da nasıl olduğundan emin değilim)
Sadece gelecek için
gözlemlememiz gerekir ki [(ngModel)]="hero.name" sadece şekerden arındırılabilecek bir kısa yoldur: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".
Yani kodu şekerden arındırırsak:
<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">
veya
<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">
Yukarıdaki kodu incelerseniz, 2 ngModelChange olayı ile sonuçlandığımızı ve bunların belirli bir sırayla yürütülmesi gerektiğini fark edeceksiniz.
Toparlıyorum: ngModelChange'i ngModel'den önce yerleştirirseniz, $event'i yeni değer olarak alırsınız, ancak model nesneniz hala önceki değeri tutar. ngModel'den sonra yerleştirirseniz, model zaten yeni değere sahip olacaktır.