2017-02-14 3 views
2

각도 2 @Input 속성을 사용하여 원하는 숫자 값을 이와 같이 하위 구성 요소에 전달합니다.각도 2 ngOnChanges가 빠르게 변경되는 입력에서 실행되지 않음

부모 구성 요소 :

@Component({ 
selector: 'test-parent', 
template: '<button (click)="raiseCounter()">Click me!</button><test-child [value]="counter"></test-child>' 
}) 

export class ParentComponent { 
public counter: number = 0; 

raiseCouner() { 
    this.counter += 1; 
    this.counter += 1; 
    this.counter += 1; 
} 
} 

하위 성분이 시나리오에서는

@Component({ 
    selector: 'test-child' 
}); 

export class ChildComponent implments OnChanges { 
@Input() value: number = 0; 

ngOnChanges() { 
    if (this.value) { 
    this.doSomeWork(); 
    } 
} 

doSomeWork() { 
    console.log(this.value); 
} 
} 

상기 OnChanges주기 후크 입력 값이 0으로 변경 보여주는 번만 대신 3 번 트리거 3. 그러나 값이 바뀔 때마다 (0 -> 1, 1 -> 2, 2 -> 3 등) 트리거해야합니다. 이 작업을 수행하는 방법이 있습니까?

감사합니다.

답변

1

예상되는 동작입니다.
(click) 이벤트 처리기가 완료되면 Angular2가 변경 감지를 실행하고, 이는 += 1 세 번째 이후입니다.
변경 감지가 @Input() 바인딩을 업데이트하면 ngOnChanges()이 호출됩니다.