可观察量:Angular2 父子通信

Question

我有一个 angular2 形式，它由一个父组件和几个子组件组成。 我的服务中有一个重播主题，当父级需要保存某些内容并且子级订阅它并保存其元素时，它会发出。父组件需要知道所有子组件何时完成保存。(保存完成后，我们仍将处于表单中。所以孩子们不能退订。( 我如何实现这一点。？ 任何帮助将不胜感激。谢谢

Parent component
----------------------
ngOnInit() {
// TODO: listen to child events and check if respose from all children received ?? 
}
save() {
console.log("Saving elements on parent component");
this.formService.save$.next(this.job.id);
}
Child 1
---------------- 
ngOnInit() {
this.formService.save$.subscribe(() =>
console.log("Save elements on child1 component");
// TODO: some event from here to say child 1 is done saving. ? 
);
}

Child 2
---------------- 
ngOnInit() {
this.formService.save$.subscribe(() =>
console.log("Save elements on child2 component");
// TODO: some event from here to say child 2 is done saving.  ?
);
}

Answer 1

假设父组件有权访问其模板中的子组件，则父组件可以侦听子组件在完成保存后发出的onSaved事件。

在子组件中，您将定义一个输出事件：

@Output() onSaved = new EventEmitter<any>();

然后，在父模板中侦听该事件：

父组件.html

<child-component (onSaved)="childSaved()"></child-component>

ParentComponent.ts

onSaved() { // Action when all child components have indicated save is completed }

有关此类组件通信的角度文档，请参见此处。

关于SO也有一些很好的答案 - 比如这个