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 @Output
van 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 “ngModel
dingen”
<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 ngModelChange
vóór ngModel
plaatst, krijgt u de $event
als de nieuwe waarde, maar uw model object heeft nog steeds de vorige waarde.
Als je het achter ngModel
plaatst, heeft het model al de nieuwe waarde.
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>
-elementwijzigt
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