Angular 1 не приема събитието onchange()
, а само събитието ng-change()
.
Angular 2, от друга страна, приема както събитията (change)
, така и (ngModelChange)
, които изглежда правят едно и също нещо.
Каква е разликата?
Кое от тях е най-добро за производителността?
ngModelChange:
<input type="text" pInputText class="ui-widget ui-text"
(ngModelChange)="clearFilter()" placeholder="Find"/>
срещу промяна:
<input type="text" pInputText class="ui-widget ui-text"
(change)="clearFilter()" placeholder="Find"/>
Събитие (промяна)
, свързано с класическо събитие за промяна на входа.
https://developer.mozilla.org/en-US/docs/Web/Events/change
Можете да използвате събитието (промяна), дори ако нямате модел на входа, както
<input (change)="somethingChanged()">
(ngModelChange)
е @Output
на директивата ngModel. Тя се задейства, когато моделът се промени. Не можете да използвате това събитие без директивата ngModel.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124
Както ще откриете повече в изходния код, (ngModelChange)
излъчва новата стойност.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169
Така че това означава, че имате възможност за такава употреба:
<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
// do something with new value
}
По принцип изглежда, че няма голяма разлика между двете, но събитията ngModel
придобиват по-голяма сила, когато използвате [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
}
приемете, че опитате същото нещо без "ngModel
неща"
<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 функцията (ngModelChange)="eventHandler()"
ще се задейства преди стойността, свързана с [(ngModel)]="value"
, да бъде променена, докато функцията (change)="eventHandler()"
ще се задейства след промяна на стойността, свързана с [(ngModel)]="value"
.
Както открих и написах в друга тема - това важи за Angular < 7 (не съм сигурен как е в 7+)
Само за в бъдеще
трябва да отбележим, че [(ngModel)]="hero.name" е просто съкращение, което може да бъде разграфено до: (ngModelChange)="hero.name" (ngModelChange)="hero.name = $event".
Така че, ако десугестираме кода, ще получим:
<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">
или
<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">
Ако разгледате горния код, ще забележите, че в крайна сметка имаме 2 събития ngModelChange и те трябва да се изпълняват в определен ред.
В заключение: Ако поставите ngModelChange преди ngModel, ще получите $събитието като нова стойност, но вашият обект модел все още ще притежава предишната стойност. Ако го поставите след ngModel, моделът вече ще има нова стойност.