Angular 1 não aceita onchange()
event, it's aceita apenas ng-change()
event.
Angular 2, por outro lado, aceita tanto (mudar)
como (ngModelChange)
eventos, o que ambos parecem estar fazendo a mesma coisa.
Qual'é a diferença?
qual é o melhor para o desempenho?
**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"/>
evento vinculado ao evento clássico de mudança de entrada.
https://developer.mozilla.org/en-US/docs/Web/Events/change
Você pode usar (mudar) evento mesmo que você não'não tenha um modelo na sua entrada como
<input (change)="somethingChanged()">
ngModelChange" é a `@Operação' da diretiva ngModel. Ela dispara quando o modelo muda. Você não pode utilizar este evento sem a diretiva ngModel.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124
À medida que você descobre mais no código fonte, (ngModelChange)
emite o novo valor.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169
Então significa que você tem a capacidade de tal uso:
<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
// do something with new value
}
Basicamente, parece que não há grande diferença entre dois, mas eventos 'ngModel' ganham o poder quando você utiliza [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
}
Assuma que você tenta a mesma coisa sem "ngModel
things"
<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
}
No Angular 7, o (ngModelChange)="eventHandler()"
irá disparar antes o valor vinculado a [(ngModel)]="value"
é alterado enquanto o (change)="eventHandler()"
irá disparar após o valor vinculado a [(ngModel)]="value"
é alterado.
Como eu encontrei e escrevi em outro tópico - isto se aplica ao < angular; 7 (não tenho certeza como é em 7+)
Só para o futuro
precisamos observar que [(ngModel)]="hero.name" é apenas um atalho que pode ser dessugarrado: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".
Por isso, se des-sugarrarmos o código, acabaremos por ficar com ele:
<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">
ou
<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()"&qot;
Se você inspecionar o código acima você notará que acabamos com 2 ngModelChange events e estes precisam ser executados em alguma ordem.
Resumindo: Se você colocar o ngModelChange antes do ngModel, você recebe o evento $ como o novo valor, mas o seu objeto modelo ainda mantém o valor anterior. Se você colocá-lo após ngModel, o modelo já terá o novo valor.