[javascript] 각도에서 (change) vs (ngModelChange)

JAVASCRIPT / 글쓴이

각도 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이벤트가 발생하고 순서대로 실행해야합니다.

요약 : 전에 배치 하면 새 값으로 얻을 수 있지만 모델 객체는 여전히 이전 값을 유지합니다. ngModelChangengModel$event
뒤에 배치 ngModel하면 모델에 이미 새 값이 적용됩니다.

출처

답변

1- (change) HTML onchange 이벤트에 바인딩됩니다. HTML onchange에 대한 설명서는 다음과 같습니다.

사용자가 <select>요소 의 선택된 옵션을 변경할 때 JavaScript를 실행합니다

출처 : https://www.w3schools.com/jsref/event_onchange.asp

2- 앞에서 언급했듯이 (ngModelChange)입력에 바인딩 된 모델 변수에 바인딩됩니다.

그래서 내 해석은 다음과 같습니다.

  • (change)사용자 가 입력을 변경하면 트리거됩니다.
  • (ngModelChange) 모델이 사용자 작업에 연속적이든 아니든 모델이 변경 될 때 트리거됩니다.

답변