각도에서의 (변경) 대 (ngModelChange)

각도에서의 (변경) 대 (ngModelChange)

각도 1은 허용되지 않습니다.onchange()이벤트, 그것은 단지 받아들여진다.ng-change()이벤트입니다.

반면 각도 2는 두 가지 모두를 받아들인다.(change)그리고.(ngModelChange)두 사건 모두 같은 일을 하고 있는 것 같습니다.

뭐가 다른데?

어떤 것이 퍼포먼스에 가장 적합합니까?

ng Model Change:

<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)는@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
}

Angular 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이벤트 및 이벤트 실행이 필요합니다.

요약: 앞에 배치하면 가 새 값으로 표시되지만 모델 객체는 이전 값을 유지합니다.뒤에 두면ngModel모델에는 이미 새로운 값이 할당되어 있습니다.

원천

1 - (change)는 HTML onchange 이벤트에 바인드됩니다.HTML 의 변경에 관한 메뉴얼에는, 다음과 같이 기재되어 있습니다.

사용자가 선택한 옵션 변경 시 JavaScript 실행<select>요소

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

2 - 전술한 바와 같이(ngModelChange)는 입력에 바인딩된 모델 변수에 바인딩됩니다.

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

• (change)사용자가 입력을 변경할 때 트리거합니다.
• (ngModelChange)변경되었을 때 모델 변경 시 트리거 됩니다.

내 경험에 의하면(change) ★★★★★★★★★★★★★★★★★」(ngModelChange)에는 두 가지 용도가 있습니다.

1. (ngModelChange)HTML 렌더링 시 사용자가 해당 요소의 값을 변경했을 때 트리거합니다.

2. (change)사용자가 값을 변경하고 요소 포커스를 벗어날 때 트리거합니다.

사용방법:

1. (ngModelChange): html에 의존하여 처리해야 하는 중요한 변경사항이 있을 때.
2. (change) 한 값 사용자가 수행한 값 변경만 처리해야 하는 경우.

시 주의해 .(ngModelChange)콜 스택의 최대 문제가 발생하여 폼이 고정될 수 있기 때문입니다.

언급URL : https://stackoverflow.com/questions/44840735/change-vs-ngmodelchange-in-angular