Observables：Angular2 父子通信

Question

我有一个 angular2 表单，它由一个父组件和几个子组件组成。我的服务中有一个 ReplaySubject，当父母需要保存某些东西并且孩子订阅它并保存它的元素时，它会发出。父组件需要知道所有子组件何时完成保存。 （保存完成后，我们仍然处于表单中。所以孩子们不能取消订阅。）我如何实现这一点。？任何帮助将不胜感激。谢谢

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 事件。

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

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

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

ParentComponent.html

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

ParentComponent.ts

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

这种类型的组件通信的 Angular 文档是 here。

在 SO 上也有一些很好的答案——比如 this one