2017-02-14 2 views
2

Angular 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回トリガされますしかし、値が変わるたびに(0 - > 1,1 - > 2、2 - > 3など)トリガする必要があります。これを行う方法がありますか?

ありがとうございました。

答えて

1

これは正常な動作です。
(click)イベントハンドラが完了したときにAngular2が変更検出を実行します。これは、3番目の+= 1の後です。
変更検出で@Input()バインディングが更新されると、ngOnChanges()が呼び出されます。

関連する問題