(changement) vs (ngModelChange) en angulaire

Angular 1 n'accepte pas d' onchange()événement, il accepte uniquement l' ng-change()événement.

Angular 2, en revanche, accepte à la fois les événements (change)et (ngModelChange), qui semblent faire la même chose.

Quelle est la différence?

lequel est le meilleur pour la performance?

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"/>

(change) événement lié à l'événement de changement d'entrée classique.

https://developer.mozilla.org/en-US/docs/Web/Events/change

Vous pouvez utiliser (modifier) ​​l'événement même si vous n'avez pas de modèle à votre entrée comme

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

(ngModelChange)est la @Outputdirective de 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 en découvrez plus 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 capacité d'une telle utilisation:

<input (ngModelChange)="modelChanged($event)">

modelChanged(newObj) {
    // do something with new value
}

Fondamentalement, il semble qu'il n'y ait pas de grande différence entre deux, mais les ngModelévénements gagnent en puissance lorsque vous les 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
}

supposons que vous essayez la même chose sans « ngModelchoses»

<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()"sera déclenché avant que la valeur liée à ne [(ngModel)]="value"soit modifiée tandis que le (change)="eventHandler()"sera déclenché après que la valeur liée à [(ngModel)]="value"ait été modifiée.

Comme je l'ai trouvé et écrit dans un autre sujet - cela s'applique à angulaire <7 (je ne sais pas comment c'est dans 7+)

Juste pour l'avenir

nous devons constater que [(ngModel)]="hero.name"est juste un raccourci qui peut être désucrage à: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Donc, si nous décodons le code, nous nous retrouverions avec:

<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événements et ceux-ci doivent être exécutés dans un certain ordre.

Pour résumer: si vous placez ngModelChangeavant ngModel, vous obtenez la $eventcomme 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.

LA SOURCE

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

Exécuter un JavaScript lorsqu'un utilisateur modifie l'option sélectionnée d'un <select>élément

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

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

Donc, mon interprétation est:

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