(zmiana) vs (ngModelChange) pod kątem

Angular 1 nie akceptuje onchange()zdarzeń, tylko akceptuje ng-change()zdarzenia.

Z drugiej strony, Angular 2 akceptuje oba zdarzenia (change)i (ngModelChange)zdarzenia, które wydają się robić to samo.

Co za różnica?

który jest najlepszy do wydajności?

ngModelChange :

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

vs zmiana :

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

(change) zdarzenie powiązane z klasycznym zdarzeniem zmiany wejścia.

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

Możesz użyć (zmienić) zdarzenie, nawet jeśli nie masz modelu jako danych wejściowych

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

(ngModelChange)jest @Outputdyrektywą ngModel. Uruchamia się, gdy zmienia się model. Nie możesz użyć tego zdarzenia bez dyrektywy ngModel.

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

Gdy odkryjesz więcej w kodzie źródłowym, (ngModelChange)emituje nową wartość.

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

Oznacza to, że masz możliwość takiego użycia:

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

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

Zasadniczo wydaje się, że nie ma dużej różnicy między dwoma, ale ngModelzdarzenia zyskują moc, gdy używasz [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
}

Załóżmy, że próbujesz tego samego bez „ ngModelrzeczy”

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

W Angularze 7, (ngModelChange)="eventHandler()"będzie strzelać zanim zmieni się wartość związana z, [(ngModel)]="value"podczas gdy (change)="eventHandler()"będzie strzelać po[(ngModel)]="value" zmianie wartości związanej z .

Jak znalazłem i napisałem w innym temacie - dotyczy to kątownika <7 (nie jestem pewien, jak to jest w 7+)

Tylko na przyszłość

musimy stwierdzić, że [(ngModel)]="hero.name"to tylko skrót, który może być odcukrzanych do: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Więc jeśli usuniemy kod cukru, otrzymamy:

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

lub

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

Jeśli sprawdzisz powyższy kod, zauważysz, że mamy 2 ngModelChangezdarzenia, które należy wykonać w określonej kolejności.

Podsumowując: jeśli umieścisz ngModelChangewcześniej ngModel, otrzymasz $eventnową wartość, ale obiekt modelu nadal ma poprzednią wartość. Jeśli umieścisz go później ngModel, model będzie już miał nową wartość.

ŹRÓDŁO

1 - (change) jest powiązany ze zdarzeniem HTML onchange. Dokumentacja dotycząca wymiany HTML zawiera następujące informacje:

Uruchom JavaScript, gdy użytkownik zmieni wybraną opcję <select>elementu

Źródło: https://www.w3schools.com/jsref/event_onchange.asp

2 - Jak wspomniano wcześniej, (ngModelChange)jest powiązany ze zmienną modelu powiązaną z danymi wejściowymi.

Tak więc moja interpretacja jest następująca:

• (change) uruchamia się, gdy użytkownik zmieni dane wejściowe
• (ngModelChange) wyzwala się, gdy model się zmienia, niezależnie od tego, czy jest to konsekwencja działania użytkownika, czy nie