(change) vs (ngModelChange) dans angular

Question

Angular 1 n'accepte pas onchange() l'événement, c'est seulement accepte ng-change() événement.

Angular 2, en revanche, accepte à la fois (change) y (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 changement :

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>

Answer 1

(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 (de changement) même si vous n'avez pas de modèle à votre entrée comme

<input (change)="somethingChanged()">

(ngModelChange) es el @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

Au fur et à mesure que vous découvrez 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 capacité d'une telle utilisation :

<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 ngModel gagne 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
}

Answer 2

Dans Angular 7, l'élément (ngModelChange)="eventHandler()" tirera antes de la valeur liée à [(ngModel)]="value" est modifié alors que le (change)="eventHandler()" tirera après la valeur liée à [(ngModel)]="value" est modifié.

Answer 3

Comme je l'ai constaté et écrit dans un autre topic - 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é-sucré : [ngModel]="hero.name" (ngModelChange)="hero.name = $event" .

Donc, si on désucre le code, on obtiendra :

<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 ngModelChange et 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 la nouvelle valeur, mais votre objet modèle contient toujours la valeur précédente. Si vous le placez après ngModel le modèle aura déjà la nouvelle valeur.

SOURCE

Answer 4

1 - (change) est lié à l'événement HTML onchange. La documentation sur le HTML onchange indique ce qui suit :

Exécutez un JavaScript lorsqu'un utilisateur modifie l'option sélectionnée d'une page Web. <select> élément

Source : https://www.w3schools.com/jsref/event_onchange.asp

2 - Comme indiqué précédemment, (ngModelChange) est lié à la variable du modèle liée à votre entrée.

Donc, mon interprétation est :

• (change) se déclenche lorsque le utilisateur modifie l'entrée
• (ngModelChange) se déclenche lorsque le modèle change, qu'il soit consécutif à une action de l'utilisateur ou non