(изменение) vs (ngModelChange) в angular

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"/>

Ответ 1

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

Ответ 2

В Angular 7 (ngModelChange)="eventHandler()" сработает до изменения значения, связанного с [(ngModel)]="value" а (change)="eventHandler()" сработает после значения, связанного с [(ngModel)]="value" изменено.

Ответ 3

Как я нашел и написал в другой теме - это относится к угловым <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, вы получите событие $ как новое значение, но ваш объект модели все еще будет иметь предыдущее значение. Если вы поместите его после ngModel, модель уже будет иметь новое значение.

ИСТОЧНИК