값이 실제로 변경된 경우 Angular2 (입력) 처리기를 체크인하는 방법

Question

입력 필드의 ngModel이 변경된 경우 Angular2 구성 요소에서 일부 코드를 실행하려고합니다. 어떤 유형의 사용자 상호 작용에서도 실행되기 때문에 (input) 이벤트를 수신하고 싶습니다. 즉, 여기서 (change) 이벤트를 사용할 수 없습니다. 값이 변경된 경우에만 내 코드를 실행하고 싶습니다.

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'myCuteComponent', 
    templateUrl: ` 
     <h1>yoO World</h1> 
     <input [(ngModel)]="cuteValue" (input)="onInput($event)"> 
    ` 
}) 
export class MyCuteComponent { 

    cuteValue = ''; 

    constructor() { } 

    onInput(event) { 
     if (event.target.value !== this.cuteValue) { 
      console.log('value has changed'); // this will never run :(
     } 
    } 
} 

문제는 onInput가 실행되면 event.target.value 이미 새로운 값을 포함한다는 것이다 : 여기

는 예시적인 구성 요소이다. 따라서이 방법은 작동하지 않으며 console.log will은 실행되지 않습니다.

질문 : 사용자 상호 작용 유형 후에 값이 실제로 변경된 경우 적절한 (그리고 일반적인) 해결책이 있습니까?

Answer 1

이 시도 :

import { Component} from '@angular/core'; 

@Component({ 
    selector: 'myCuteComponent', 
    templateUrl: ` 
     <h1>yoO World</h1> 
     <input [(ngModel)]="cuteValue" (ngModelChange)="onInput($event)"> 
    ` }) export class MyCuteComponent { 

    onInput(value) { 
     console.log(value); 
    } 
} 

ControlValueAccessors 대괄호로 초기 값을 쓰고, 바나나 브래킷 값의 변화를 방출합니다. 따라서 [ngModel] 및 (ngModelChange)는 [(ngModel)]로 단축되어 변경 내용을 바인딩하고 내 보냅니다.

Answer 2

OnChanges (https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html)를 사용해 보셨습니까? 같은

뭔가 :

import { Component, OnChanges } from '@angular/core'; 

@Component({ 
    selector: 'myCuteComponent', 
    templateUrl: ` 
     <h1>yoO World</h1> 
     <input [(ngModel)]="cuteValue" (input)="onInput($event)"> 
    ` 
}) 
export class MyCuteComponent implements OnChanges { 

    ngOnChanges(changes: SimpleChanges) { 
     // changes.prop contains the old and the new value... 
    } 
}