を呼び出すことはありません。私はここでplunkerを作成しました:角度2双方向コンポーネントバインディングは、親ngOnChange
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ウェイバインディングのポイントは何ですか?
私はここで何が欠けていますか?
私はちょうどそれが本当に、本当に馬鹿であると言うことができます。あなたは、あなたが明示的に双方向バインディングとして設定したときに、プロパティが変更されたことを通知されることをあなたの親コンポーネントには望まないでしょうか?変更イベントを自動的にバブル処理する必要があります。 – Scottie
@Scottie、まあ、親(例えば、親ビュー)を更新したいだけで、子供が変更を行うときにロジックを実行する必要がないので、通知する必要はありません。そして正しいですが、EventEmitterによって放出されたイベントはバブルしません。 1つの変更を複数のコンポーネントに通知する場合は、共有サービス内のObservableまたはSubjectを使用することをお勧めします。 –