Wie warten, bis ein Kind-Komponente Aufgabe abgeschlossen sein, bevor Sie fortfahren

Question

Dies ist meine erste Frage hier, tut mir leid, wenn es nicht gut strukturiert ist.

Ich habe eine übergeordnete Komponente, component1, die eine Form hat, und es ruft component2 auf, das auch eine Form hat. Component2 verfügt über eine eigene Datenbanksammlung, die jedoch nur gespeichert werden kann, wenn die übergeordnete Komponente ebenfalls vorhanden ist. Es verfügt also über eine Eingabeeigenschaft namens write, die component1 auf true festgelegt hat, wenn der Benutzer auf die Schaltfläche zum Speichern klickt.

Dieser Eingang wurde mit OnChanges von component2 überprüft. NgOnChanges Anruf writeOnDB(), und das funktioniert gut.

writeOnDB versuchen, die component2-Formulardaten beizubehalten und eine Ausgabe saved auszugeben, mit true bei Erfolg oder false bei fehlschlag.

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

Funktion abschicken ist wie folgt: So

wird komponente2 wie folgt aufgerufen wird

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

Die Frage ist also, Wie warte ich auf die komponente2 emittieren saved Ausgang ?

Ich finde immer meine Antworten hier, aber ich denke, ich weiß nicht, wie ich das suchen soll, weil ich nichts gefunden habe.

Danke!

Answer 1

Es ist wie Sie, bevor Sie fortfahren passieren müssen warten, für zwei Dinge aus:

1. ein saved Ereignis von komponente2
2. ein Ereignis von editData()

Da Sie nicht wissen, Das wird zuerst beendet, Sie müssen jeden Handler überprüfen, um festzustellen, ob der andere abgeschlossen ist. Etwas wie:

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