(изменить) против (ngModelChange) в угловых

Angular 1 не принимает onchange()событие, оно только принимает ng-change()событие.

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

В Angular 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) привязан к событию onchange HTML. В документации по HTML onchange сказано следующее:

Выполнить JavaScript, когда пользователь изменяет выбранную опцию <select>элемента

Источник: https://www.w3schools.com/jsref/event_onchange.asp

2 - Как указано выше, (ngModelChange)привязан к переменной модели , связанной с вашим входом.

Итак, моя интерпретация такова:

• (change)срабатывает, когда пользователь меняет ввод
• (ngModelChange) срабатывает при изменении модели, независимо от того, является ли она следствием действия пользователя или нет