(изменение) vs (ngModelChange) в угловой

Question

(изменение) vs (ngModelChange) в угловой

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

угловой 2, с другой стороны, принимает оба (change) и (ngModelChange) события, которые оба, кажется, делают то же самое.

какая разница?

является ли один из них более эффективным?

ngModelChange:

<input type="text" pInputText class="ui-widget ui-text"

    (ngModelChange)="clearFilter()" placeholder="Find"/>

vs изменить:

<input type="text" pInputText class="ui-widget ui-text" 

    (change)="clearFilter()" placeholder="Find"/>

647 1

javascript html typescript angular angular-ngmodelchange

1 ответ:

Comments

Ничего не найдено.

omeralper · Accepted Answer · 2017-07-13 13:41:14

(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

}