Unghiulare 1 nu accept onchange()
eveniment, l's acceptă numai ng-schimba()
eveniment.
Unghiulare 2, pe de altă parte, acceptă ambele (schimba) " și " (ngModelChange)
evenimente, care pare a fi a face același lucru.
Ce's diferența?
care este cel mai bun pentru performanță?
ngModelChange:
<input type="text" pInputText class="ui-widget ui-text"
(ngModelChange)="clearFilter()" placeholder="Find"/>
vs schimbarea:
<input type="text" pInputText class="ui-widget ui-text"
(change)="clearFilter()" placeholder="Find"/>
(schimba)
eveniment legat clasică de intrare schimba eveniment.
https://developer.mozilla.org/en-US/docs/Web/Events/change
Puteți utiliza (schimba) eveniment, chiar dacă tu nu't au un model de la intrare ca
<input (change)="somethingChanged()">
(ngModelChange)
este `@Ieșire de ngModel directivă. Se declanșează atunci când modelul se schimbă. Nu puteți utiliza acest eveniment fără ngModel directivă.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124
Ca să descoperi mai multe în codul sursă, (ngModelChange)
emite noua valoare.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169
Deci, aceasta înseamnă că aveți posibilitatea de a astfel de utilizare:
<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
// do something with new value
}
Practic, se pare că nu există nici o diferență mare între cele două, dar ngModel
evenimente câștiguri puterea atunci când utilizați [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
}
presupunem că încercați același lucru fără "ngModel
lucrurile"
<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
}
În Unghiulare 7, (ngModelChange)="eventHandler()"
va foc înainte valoarea obligat să [(ngModel)]="valoarea" este schimbat în timp ce
(schimba)="eventHandler()"va foc **după** valoarea obligat să
[(ngModel)]="valoarea" este schimbat.
După cum am găsit și scris în alt subiect - acest lucru se aplică la unghiulare < 7 (nu sunt sigur cum e la 7+)
Doar pentru viitor
trebuie să observăm că [(ngModel)]="eroul.numele" este doar un scurt-cut, care pot fi de-zaharisit la: [ngModel]="eroul.numele" (ngModelChange)="eroul.nume = $evenimentului".
Deci, dacă am de-zahăr cod ne-ar termina cu:
<selectați (ngModelChange)="onModelChange()" [ngModel]="eroul.numele" (ngModelChange)="eroul.nume = $evenimentului">
sau
<[ngModel]="eroul.numele" (ngModelChange)="eroul.nume = $evenimentului" selectați (ngModelChange)="onModelChange()">
Dacă vă verificați codul de mai sus veți observa că vom ajunge cu 2 ngModelChange evenimente și acele trebuie să fie executate într-o anumită ordine.
Rezumând: Daca ai loc ngModelChange înainte ngModel, veți obține $eveniment ca noua valoare, dar modelul obiect deține încă valoarea anterioară. Dacă vă puneți-l după ngModel, modelul va avea deja noua valoare.