(veranderen) vs (ngModelChange) in hoekig

Angular 1 accepteert geen onchange()-gebeurtenis, het accepteert alleen ng-change()-gebeurtenis.

Angular 2 daarentegen accepteert zowel (change)als (ngModelChange)gebeurtenissen, die allebei hetzelfde lijken te doen.

Wat is het verschil?

welke is het beste voor prestaties?

ngModelChange:

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

vs verandering:

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

Antwoord 1, autoriteit 100%

(change)gebeurtenis gebonden aan klassieke invoer wijzigingsgebeurtenis.

https://developer.mozilla.org/en-US/ docs/Web/Evenementen/wijzigen

U kunt (wijzigen) gebeurtenis gebruiken, zelfs als u geen model bij uw invoer heeft als

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

(ngModelChange)is de @Outputvan de ngModel-richtlijn. Het wordt geactiveerd wanneer het model verandert. U kunt deze gebeurtenis niet gebruiken zonder ngModel-richtlijn.

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

Naarmate je meer ontdekt in de broncode, geeft (ngModelChange)de nieuwe waarde af.

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

Dus het betekent dat je de mogelijkheid hebt tot dergelijk gebruik:

<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
    // do something with new value
}

Kortom, het lijkt alsof er geen groot verschil is tussen twee, maar ngModel-gebeurtenissen winnen aan kracht wanneer je [ngValue]gebruikt.

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

stel dat je hetzelfde probeert zonder “ngModeldingen”

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

Antwoord 2, autoriteit 20%

In Angular 7 wordt de (ngModelChange)="eventHandler()"geactiveerd vóórde waarde gebonden aan [(ngModel)]="value"wordt gewijzigd terwijl de (change)="eventHandler()"wordt geactiveerd nade waarde gebonden aan [(ngModel)]="value"is gewijzigd.


Antwoord 3, autoriteit 5%

Zoals ik heb gevonden en geschreven in een anderonderwerp – dit geldt voor hoekige < 7 (niet zeker hoe het is in 7+)

Alleen voor de toekomst

we moeten opmerken dat [(ngModel)]="hero.name"slechts een snelkoppeling is die kan worden ontsuikerd tot: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Dus als we de suikercode zouden ontdoen, zouden we eindigen met:

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

of

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

Als je de bovenstaande code inspecteert, zul je merken dat we eindigen met 2 ngModelChange-gebeurtenissen en deze moeten in een bepaalde volgorde worden uitgevoerd.

Samenvattend: Als u ngModelChangevóór ngModelplaatst, krijgt u de $eventals de nieuwe waarde, maar uw model object heeft nog steeds de vorige waarde.
Als je het achter ngModelplaatst, heeft het model al de nieuwe waarde.

BRON


Antwoord 4

1 –(change)is gebonden aan de HTML onchange-gebeurtenis. De documentatie over HTML onchange zegt het volgende:

Voer een JavaScript uit wanneer een gebruiker de geselecteerde optie van een <select>-element

wijzigt

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

2 –Zoals eerder vermeld, is (ngModelChange)gebonden aan de modelvariabele die aan uw invoer is gekoppeld.

Dus mijn interpretatie is:

  • (change)wordt geactiveerd wanneer de gebruikerde invoer wijzigt
  • (ngModelChange)wordt geactiveerd wanneer het model verandert, of het nu opeenvolgend is aan een gebruikersactie of niet

LEAVE A REPLY

Please enter your comment!
Please enter your name here

4 × 5 =

Other episodes