javascript - 如何在继续之前等待子组件任务完成

这是我的第一个问题，如果结构不好，请您谅解。

我有一个父组件component1，它有一个表单，
它调用了component2，它也有一个表单。
Component2有其自己的数据库集合，但是只有在父组件也存在的情况下才能保存它。因此，它具有一个名为write的Input属性，当用户单击保存按钮时，component1设置为true。

组件2已使用OnChanges检查此输入。
NgOnChanges调用writeOnDB()，并且工作正常。

writeOnDB尝试持久化component2表单数据，并发出Output saved，成功则为true，失败则为false。

因此，component2被这样调用：

<component2
    [write]="saveForm"
    (saved)="onCmp2Saved($event)">
</component2>

我的提交功能是这样的：

onSubmit(form) {
    // Get form values and save into component1 object
    this.cmp1 = form;

    // Set Flag to save component2 on BD
    this.saveForm = true;

    let result = this._cmp1Service.editData(this.cmp1)

    //TODO: Check if component2 successfully saved its form before proceed

    result.subscribe(
        res => _router.navigate['home'],
        error => ...
    );
}

所以问题是
我如何等待component2发出saved输出？

我总是在这里找到答案，但我想我不知道该怎么搜索，因为我什么也没找到。

谢谢！

最佳答案

看来您需要等待两件事发生才能继续：


来自component2的saved事件
editData()中的事件


由于您不知道哪个首先完成，因此需要每个处理程序检查另一个是否完成。就像是：

onSubmit(form) {
    this.cmp1 = form;
    this.saveForm = true;
    this.component2Done = false;
    this.component1Done = false;
    this._cmp1Service.editData(this.cmp1).subscribe(
        res => {
           this.component1Done = true;
           if(this.component2Done) { doSomething(); }
        },
        error => ...
    );
}
onCmp2Saved(result) {
     this.component2Done = true;
     if(this.component1Done) { doSomething(); }
}