Angular 1 n'accepte pas l'événement onchange()
, il n'accepte que l'événement ng-change()
.
Angular 2, en revanche, accepte à la fois les événements (change)
et (ngModelChange)
, qui semblent tous deux faire la même chose.
Quelle est la différence ?
Lequel est le meilleur pour les performances ?
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"/>
Événement (change)
lié à l'événement classique de changement d'entrée.
https://developer.mozilla.org/en-US/docs/Web/Events/change
Vous pouvez utiliser l’événement (change) même si vous n’avez pas de modèle à l’entrée.
<input (change)="somethingChanged()">
(ngModelChange)
est le @Output
de la directive ngModel. Il se déclenche lorsque le modèle change. Vous ne pouvez pas utiliser cet événement sans la directive ngModel.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124
Comme vous le découvrirez plus loin dans le code source, (ngModelChange)
émet la nouvelle valeur.
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169
Cela signifie donc que vous avez la possibilité de l'utiliser :
<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
// do something with new value
}
En fait, il semble qu'il n'y ait pas de grande différence entre les deux, mais les événements ngModel
gagnent en puissance lorsque vous utilisez [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
}
supposez que vous essayez la même chose sans "ngModel
choses" ;
<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
}
Dans Angular 7, le (ngModelChange)="eventHandler()"
se déclenche avant que la valeur liée à [(ngModel)]="value"
soit modifiée, tandis que le (change)="eventHandler()"
se déclenche après que la valeur liée à [(ngModel)]="value"
soit modifiée.
Comme je l'ai trouvé et écrit dans un autre sujet - ceci s'applique à angular < 7 (je ne sais pas comment c'est dans 7+)
Juste pour l'avenir
nous devons observer que [(ngModel)]="hero.name" ; n'est qu'un raccourci qui peut être désensorcelé en : [ngModel]="hero.name" ; (ngModelChange)="hero.name = $event" ;.
Donc, si nous désucrons le code, nous obtiendrons :
<select (ngModelChange)="onModelChange()" ; [ngModel]="hero.name" ; (ngModelChange)="hero.name = $event">
ou
<[ngModel]="hero.name" ; (ngModelChange)="hero.name = $event" ; select (ngModelChange)="onModelChange()">
Si vous inspectez le code ci-dessus, vous remarquerez que nous nous retrouvons avec 2 événements ngModelChange et que ceux-ci doivent être exécutés dans un certain ordre.
En résumé : Si vous placez ngModelChange avant ngModel, vous obtenez le $event comme nouvelle valeur, mais votre objet modèle conserve la valeur précédente. Si vous le placez après ngModel, le modèle aura déjà la nouvelle valeur.
[SOURCE] [2]