Angular 2에서 해당하는 OnChange

1. Angular 2의 OnChange 속성
2. Angular 2의 OnChange와 동일

Angular 이벤트 바인딩은 모든 DOM 이벤트에 응답하는 좋은 방법입니다. 이를 통해 요소의 기본 클릭 또는 입력 이벤트와 코드를 바인딩하고 발생할 때 실행할 수 있습니다.

OnChanges는 Angular 프로젝트에서 입력 매개변수의 변경 사항을 모니터링하는 데 사용할 수 있으며 이 기사에서 논의할 입력 필드, 버튼 클릭, 목록 항목 또는 스크롤 이벤트에 대해 Angular 2에 해당하는 OnChanges를 사용할 수 있습니다. .

Angular 2의 OnChange 속성

Angular 2.0에는 양방향 데이터 바인딩이 있습니다. 입력 필드에 대한 모든 변경 사항은 UI에 즉시 반영되며 그 반대의 경우도 마찬가지입니다.

‘Onchange’는 사용자가 입력하거나 드롭다운 목록에서 값을 선택할 때 발생해야 하는 작업을 지정하는 Angular 2의 입력 요소 속성입니다.

통사론:

ngOnChanges(changes: SimpleChanges)

SimpleChanges 인수는 ngOnChanges() 메서드로 전달되며, 수정 후 새 입력 값과 이전 입력 값을 반환합니다.

입력 사용자 개체 데이터 유형을 사용할 때 ngOnChanges()는 상위 구성 요소의 개체 링크가 변경될 때만 호출됩니다.

ngOnChanges() 메서드는 입력 사용자 개체의 속성 값만 변경하면 실행되지 않습니다.

Angular 2의 OnChange와 동일

OnChanges 이벤트는 입력 값이 변경될 때 실행되는 라이프 사이클 후크입니다. ngModel 지시문은 입력 또는 textarea 요소를 현재 범위의 속성에 바인딩하고 Angular 2에서 지원되는 HTML5 onchange 이벤트를 대체합니다.

ngModelChange 이벤트는 모델이 업데이트되고 값이 변경되면 시작됩니다. ngModel 지시문에 표현식을 전달하거나 입력에 바인딩하여 실행할 수 있습니다.

예제 코드 - HTML:

<div>
  <input [value]="first" (change)="changeFn($event)">
  <p>{{ first }}</p>
  <input [ngModel]="second" (ngModelChange)="modelChangeFn($event)">
  <p>{{ second }}</p>
</div>

예제 코드 - TypeScript:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  first = '1';
  second = '2';
  changeFn(abc) {
    this.first = abc.target.value;
  }
  modelChangeFn(abc: string) {
    this.second = abc;
  }
}

출력:

changeFn()은 사용자가 입력을 흐리게 할 때만 실행됩니다. 반면 사용자가 입력 값을 입력하거나 붙여넣거나 편집하면 ModelChangeFn()이 이벤트를 수신하고 객체를 설정합니다.

여기를 클릭하여 위에서 언급한 코드를 실행합니다.