(cambia) vs (ngModelChange) in angolare

Angular 1 non accetta onchange()eventi, accetta solo ng-change()eventi.

Angolare 2, d'altra parte, accetta entrambi (change)e (ngModelChange)gli eventi, che sia sembra stia facendo la stessa cosa.

Qual è la differenza?

qual è il migliore per le prestazioni?

ngModelChange :

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

vs cambiamento :

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

(change) evento associato all'evento di modifica dell'ingresso classico.

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

È possibile utilizzare (modificare) l'evento anche se non si dispone di un modello come input

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

(ngModelChange)è la @Outputdirettiva di ngModel. Si attiva quando il modello cambia. Non è possibile utilizzare questo evento senza la direttiva ngModel.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124

Man mano che scopri di più nel codice sorgente, (ngModelChange)emette il nuovo valore.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169

Quindi significa che hai la capacità di tale utilizzo:

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

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

Fondamentalmente, sembra che non ci sia una grande differenza tra due, ma gli ngModeleventi ottengono il potere quando lo usi [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
}

supponi di provare la stessa cosa senza " ngModelcose"

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

In Angolare 7, il (ngModelChange)="eventHandler()"fuoco sparerà prima che il valore associato [(ngModel)]="value"sia cambiato mentre il (change)="eventHandler()"fuoco sparerà dopo che il valore [(ngModel)]="value"è cambiato.

Come ho trovato e scritto in un altro argomento, questo vale per angolare <7 (non sono sicuro di come sia in 7+)

Solo per il futuro

abbiamo bisogno di osservare che [(ngModel)]="hero.name"è solo una scorciatoia che può essere de-zuccherato a: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Quindi se eliminiamo lo zucchero dal codice finiremmo con:

<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">

o

<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">

Se si controlla il codice sopra riportato, si noterà che si verificano 2 ngModelChangeeventi e questi devono essere eseguiti in un certo ordine.

Riassumendo: se si posiziona ngModelChangeprima ngModel, si ottiene $eventcome il nuovo valore, ma l'oggetto modello mantiene ancora il valore precedente. Se lo si inserisce dopo ngModel, il modello avrà già il nuovo valore.

FONTE

1 - (change) è associato all'evento HTML onchange. La documentazione su HTML Onchange dice quanto segue:

Esegui un JavaScript quando un utente modifica l'opzione selezionata di un <select>elemento

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

2 - Come affermato in precedenza, (ngModelChange)è associato alla variabile del modello associata all'input.

Quindi, la mia interpretazione è:

• (change)si innesca quando l' utente modifica l'input
• (ngModelChange) si attiva quando il modello cambia, indipendentemente dal fatto che sia consecutivo a un'azione dell'utente o meno