Question

这是我的第一个问题，抱歉，如果结构不合理。

我有一个父组件component1，它有一个表单，它调用component2，它也有一个表单。 Component2有自己的数据库集合，但只有父组件也可以保存。所以它有一个名为write的Input属性，当用户点击保存按钮时，component1设置为true。

使用OnChanges，component2检查此输入。 NgOnChanges致电writeOnDB()，这很好。

writeOnDB尝试持久化component2表单数据，并发出一个输出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输出？

我总是在这里找到答案，但我想我不知道怎么搜索这个，因为我找不到任何东西。

谢谢！

Answer 1

看起来你需要等待两件事情才能继续：

来自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(); }
}

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

1 个答案: