web-dev-qa-db-fra.com

(change) vs (ngModelChange) dans angular

Angular 1 n'accepte pas l'événement onchange, il n'accepte que l'événement ng-change.

Angular 2, en revanche, accepte les deux événements (change) et (ngModelChange), qui semblent tous deux 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"/>
javascripthtmlangulartypescriptangular-ngmodelchange
221
Ramesh Rajendran

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

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

Vous pouvez utiliser (changer) un événement même si vous n’avez pas de modèle à votre 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

Au fur et à mesure que 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

Donc, cela signifie que vous avez la capacité d'une telle utilisation:

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

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

En gros, il semble qu'il n'y ait pas de grande différence entre 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
}
356
omeralper

Dans Angular 7, le (ngModelChange)="eventHandler()" se déclenchera avant la valeur liée à [(ngModel)]="value" sera modifié tandis que le (change)="eventHandler()" se déclenchera after la valeur liée à [(ngModel)]="value" est modifiée.

43
CAK2

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

Juste pour le futur

nous devons observer que [(ngModel)] = "hero.name" n'est qu'un raccourci qui peut être décompressé en: [ngModel] = "hero.name" (ngModelChange) = "hero.name = $ event ".

Donc, si nous supprimons le code du sucre, 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 événements ngModelChange et que ceux-ci doivent être exécutés dans un ordre quelconque.

En résumé: Si vous placez ngModelChange avant ngModel, vous obtenez l'événement $ comme nouvelle valeur, mais votre objet modèle conserve la valeur précédente. Si vous placez Après ngModel, le modèle aura déjà la nouvelle valeur.

SOURCE

1
Disaster