角度2双方向コンポーネントバインディングは、親ngOnChange

Question

を呼び出すことはありません。私はここでplunkerを作成しました：

http://plnkr.co/edit/8bwqkYQ6tqrpGwHT588y?p=preview

を問題を示しています。

基本的に、私は2つのコンポーネントを持っています。最初のコンポーネントは、子コンポーネントへのプロパティの双方向バインディングを持ちます。

私の親コンポーネントは次のとおりです。

import { Component, Input, Output, EventEmitter } from '@angular/core' 
import { ChildComponent } from "./childComponent" 

@Component({ 
    selector: 'parentComponent', 
    template: ` 
    <div> 
     <a href="#" (click)="selectedId = 0">Reset</a><br> 
     <div>Parent SelectedId: {{selectedId}}</div> 
     <childComponent [(selectedId)]="selectedId"></childComponent> 
    </div> 
    `, 
    directives: [ChildComponent] 
}) 

export class ParentComponent { 
    @Input() selectedId: number; 

    ngOnChanges(changes) { 
     console.log("Parent changes called!"); 
    } 
} 

と私の子コンポーネント：子で

import { Component, Input, Output, EventEmitter } from '@angular/core' 

@Component({ 
    selector: 'childComponent', 
    template: ` 
    <div> 
     <div>Child SelectedId: {{selectedId}}</div> 
    </div> 
    `, 
    directives: [] 
}) 

export class ChildComponent { 
    @Input() selectedId: number; 
    @Output() selectedIdChange: EventEmitter<number> = new EventEmitter<number>(); 

    constructor() { 
     setTimeout(() => { 
     this.selectedId = 100; 
     this.selectedIdChange.emit(this.selectedId); 
     }, 2000); 
    } 

    ngOnChanges(changes) { 
     console.log("Child changes called!"); 
    } 
} 

、私が発した後、2秒後に、プログラムselectedIdの値を変更するためにタイムアウトを設定します値を親に返します。

これはすばらしいことですが、1つのことを除いて...親のngOnChangeは1回だけ呼び出されます。

私は親が非常に子供が値を変更したかどうかを知りたいと思うでしょうか、それとも2ウェイバインディングのポイントは何ですか？

私はここで何が欠けていますか？

Answer 1

親のngOnChangeは、ParentComponentの入力プロパティがバインドされているため、AppのselectedIdが変更された場合にのみ呼び出されます。

あなたは親が子に加えられた変更の通知を受けたい場合は、xChangeイベント（xが入力プロパティの名前です）–すなわちに結合し、プロパティとイベントバインディングを破る：

<childComponent [selectedId]="selectedId" (selectedIdChange)="changed($event)"></childComponent> 

changed(newValue) { 
    console.log('newValue', newValue); 
    this.selectedId = newValue; 
} 

Plunker