각도에서 (change) vs (ngModelChange)

각도에서 (change) vs (ngModelChange)

---

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

---

(change) 클래식 입력 변경 이벤트에 바인딩 된 이벤트입니다.

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

입력에 모델이없는 경우에도 (변경) 이벤트를 사용할 수 있습니다

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

(ngModelChange)는 IS @OutputngModel 지시어가. 모델이 변경되면 시작됩니다. 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 뒤에 배치하면 모델에 이미 새 값이 있습니다.

출처

참고 URL : https://stackoverflow.com/questions/44840735/change-vs-ngmodelchange-in-angular