javascript - (change) vs (ngModelChange) în angular

Angular 1 nu acceptă evenimentul onchange(), acceptă doar evenimentul ng-change().

Angular 2, pe de altă parte, acceptă atât evenimentele (change), cât și (ngModelChange), care par să facă ambele același lucru.

Care este diferența?

care este cel mai bun pentru performanță?

ngModelChange:

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

vs schimbare:

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

Răspuns #1

Evenimentul (change) legat de evenimentul clasic de schimbare a inputului.

https://developer.mozilla.org/ro/docs/Web/Events/change

Poți folosi evenimentul (change) chiar dacă nu ai un model la input-ul tău ca

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

(ngModelChange) este @Output al directivei ngModel. Se declanșează atunci când modelul se schimbă. Nu puteți utiliza acest eveniment fără directiva ngModel.

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

Pe măsură ce descoperiți mai multe în codul sursă, (ngModelChange) emite valoarea nouă.

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

Deci înseamnă că ai abilitatea de a folosi astfel:

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

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

Practic, se pare că nu există o mare diferență între cele două, dar evenimentele ngModel câștigă putere atunci când folosești [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
}

presupune că încerci același lucru fără lucrurile "ngModel"

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

Răspunsul #2

În Angular 7, (ngModelChange)="eventHandler()" se va declanșa înainte ca valoarea legată de [(ngModel)]="value" să fie modificată, în timp ce (change)="eventHandler()" se va declanșa după ce valoarea legată de [(ngModel)]="value" a fost modificată.

Răspunsul #3

Așa cum am descoperit și am scris într-un alt subiect - aceasta se aplică pentru Angular < 7 (nu sunt sigur cum este în 7+)

Doar pentru viitor

trebuie să observăm că [(ngModel)]="hero.name" este doar un scurtcircuit care poate fi descompus în: [ngModel]="hero.name" (ngModelChange)="hero.name=$event".

Deci, dacă am elimina prescurtările din cod, am ajunge la:

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

sau

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

Dacă inspectați codul de mai sus, veți observa că ajungem cu 2 evenimente ngModelChange și acestea trebuie să fie executate într-o anumită ordine.

Pe scurt: Dacă plasați ngModelChange înainte de ngModel, primiți $event ca valoare nouă, dar obiectul modelului dvs. încă reține valoarea anterioară. Dacă îl plasați după ngModel, modelul va avea deja valoarea nouă.

SURSA

Răspunsul #4

1 - (change) este legat de evenimentul HTML onchange. Documentația despre HTML onchange spune următoarele:

Execută un JavaScript atunci când un utilizator schimbă opțiunea selectată a unui element <select>

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

2 - Așa cum s-a menționat anterior, (ngModelChange) este legat de variabila modelului asociată câmpului tău de input.

Deci, interpretarea mea este :

• (change) se declanșează atunci când utilizatorul schimbă inputul
• (ngModelChange) se declanșează atunci când modelul se schimbă, fie că este consecutiv unei acțiuni a utilizatorului sau nu

Răspunsul #5

Conform experienței mele, (change) și (ngModelChange) au două utilizări diferite.

1. (ngModelChange) se declanșează atunci când HTML-ul se redă, utilizatorul modificând valoarea acelui element.

2. (change) se declanșează când utilizatorul schimbă valoarea și părăsește focalizarea elementului.

Utilizare :

1. (ngModelChange): atunci când ai lucruri critice care depind de HTML, orice tip de modificări trebuie gestionate.
2. (change): Atunci când trebuie să gestionezi doar modificările valorii efectuate de utilizator.

Notă: Fii atent atunci când folosești (ngModelChange), deoarece uneori îți poate da o problemă de stivă maximă de apeluri și formularul tău se va bloca.