web-dev-qa-db-ja.com

角度の（変更）vs（ngModelChange）

Angular 1はonchangeイベントを受け付けませんが、ng-changeイベントのみを受け付けます。

一方、Angular 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"/>
javascripthtmlangulartypescriptangular-ngmodelchange
177
Ramesh Rajendran

(change)イベントは古典的な入力変更イベントにバインドされました。

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

あなたが入力としてモデルを持っていなくても、あなたは（変更）イベントを使うことができます。

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

(ngModelChange)はngModelディレクティブの@Outputです。モデルが変わると発生します。このイベントはngModelディレクティブなしでは使用できません。

https://github.com/angular/angular/blob/master/packages/forms/src /ディレクティブ/ ng_model.ts#L124

あなたがソースコードの中でより多くを発見するにつれて、(ngModelChange)は新しい値を放出します。

https://github.com/angular/angular/blob/master/packages/forms/src /ディレクティブ/ng_model.ts#L169

だからそれはあなたがそのような使用法の能力を持っていることを意味します：

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

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

基本的に、2つの間に大きな違いはないようですが、[ngValue]を使用するとngModelイベントが力を得ます。

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

Angular 7では、(ngModelChange)="eventHandler()"はbeforeを起動し、[(ngModel)]="value"にバインドされた値は変更されますが、(change)="eventHandler()"はafterを起動します[(ngModel)]="value"にバインドされた値は変更されます。

28
CAK2

another トピックで見つけて書いたように、これはangular <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
Disaster