(зміни) vs (ngModelChange) у кутовій

Кутовий 1 не приймає onchange()події, він лише приймає ng-change()подію.

Кутова 2, з іншого боку, приймає (change)і (ngModelChange)події, і обидва, здається, роблять те саме.

Яка різниця?

який найкращий для виконання?

ngModelChange :

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

проти зміни :

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

(change) подія, пов'язана з класичною подією зміни входу.

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

Ви можете використовувати (змінити) подію, навіть якщо у вас немає моделі як

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

(ngModelChange)є @Outputдирективою ngModel. Він спрацьовує, коли модель змінюється. Ви не можете використовувати цю подію без директиви ngModel.

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

Коли ви дізнаєтесь більше у вихідному коді, (ngModelChange)випромінює нове значення.

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

Тож це означає, що ти маєш можливість такого використання:

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

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

В основному, схоже, немає великої різниці між двома, але ngModelподії набирають сили при використанні [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
}

припустимо, ви спробуєте те ж саме без " 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
}

У кутовий 7, (ngModelChange)="eventHandler()"буде спрацьовувати , перш ніж значення , пов'язане з [(ngModel)]="value"змінюються в той час як (change)="eventHandler()"буде спрацьовувати після значення , пов'язаного [(ngModel)]="value"змінюються.

Як я знайшов і писав в іншій темі - це стосується кутового <7 (не впевнений, як це в 7+)

Просто на майбутнє

ми повинні зауважити , що [(ngModel)]="hero.name"це просто скорочена , що може бути де-зацукровані в: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Отже, якщо ми де-цукровий код, ми закінчилися:

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

або

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

Якщо ви ознайомитесь з наведеним вище кодом, ви помітите, що ми закінчуємо 2 ngModelChangeподії, і їх потрібно виконати в певному порядку.

Підбиття підсумків: Якщо ви розміщуєте ngModelChangeранішеngModel , ви отримуєте $eventяк нове значення, але ваш об'єкт моделі все ще має попереднє значення. Якщо розмістити його після ngModel, модель вже матиме нове значення.

ДЖЕРЕЛО

1 - (change) прив’язаний до події заміна HTML. Документація про зміну HTML говорить наступне:

Виконати JavaScript, коли користувач змінює вибраний параметр <select>елемента

Джерело: https://www.w3schools.com/jsref/event_onchange.asp

2 - Як було сказано раніше,(ngModelChange) прив'язується до змінної моделі прив'язаної до вашого вводу.

Отже, моє тлумачення:

• (change)запускає, коли користувач змінює вхід
• (ngModelChange) спрацьовує, коли модель змінюється, послідовна вона чи дії користувача чи ні