続行する前に子コンポーネントのタスクが完了するのを待つ方法

Question

これは私の最初の質問です。うまく構成されていない場合はごめんなさい。

私はフォームが の親コンポーネントcomponent1を持っていて、これもまたフォームを持つcomponent2を呼び出します。 コンポーネント2には独自のデータベースコレクションがありますが、親コンポーネントもあれば保存できます。したがって、ユーザーが保存ボタンをクリックしたときにtrueに設定されたwriteというInputプロパティがあります。

この入力は、OnChanges、component2によってチェックされています。 NgOnChangesはwriteOnDB()と呼ばれ、正常に動作しています。

writeOnDBコンポーネント2のフォームデータを保持し、成功した場合はtrue、失敗した場合はfalseを出力します。saved

ので、コンポーネント2は、このように呼ばれている：

<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 => ... 
    ); 
} 

そこで質問がされ、 はどのように私は、コンポーネント2を待つんsaved出力を発します？

私はいつも私の答えを見つけますが、私はこれを検索する方法が分からないと思うので、何も見つけられません。

ありがとうございます！

Answer 1

あなたが続ける前に発生するための2つの事柄を待つ必要があるように見えます：

1. savedイベントeditData()

から

コンポーネント2のイベントから、あなたが知っていないので、最初に終了すると、各ハンドラが完了したかどうかを確認するために各ハンドラが必要になります。次のようなもの：

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