让Angular只在两个API调用都完成时重定向?

Question

completeMedicalDataSubmission(forReview: boolean, success: MedicalData, newStatus: Status | undefined ) {
let msg = this.translate.instant("GENERAL.DATA_SAVED");
this.snackBar.open(msg, 'u2716', {duration: 8000, panelClass: ['goodPanel']});
if (forReview) {
this.patientDataReviewService.requestPatientDataReviewByPatient(success.medicalDataId!).subscribe(success => {
if (this.onComplete !== null) {
this.router.navigate([this.onComplete]);
}
})
}
if (newStatus) {
this.patientDataReviewService.updatePatientDataReviewByResearcher(this.id!, this.demographicMedicalData!.medicalDataId!, this.demographicMedicalData!.version!, newStatus).subscribe()
}
if (!forReview && this.onComplete !== null)
this.router.navigate([this.onComplete]);
}

具体来说，有没有一种方法可以使路由器。导航仅在所有API调用(如果需要)完成时发生?

Answer 1

您可以使用RxJs库中的forkJoin。你可以在这里看到文档

你可以这样做:

import { forkJoin } from 'rxjs';

const observable = forkJoin({
first: this.patientDataReviewService.requestPatientDataReviewByPatient(success.medicalDataId!),
second: this.patientDataReviewService.updatePatientDataReviewByResearcher(this.id!, this.demographicMedicalData!.medicalDataId!, this.demographicMedicalData!.version!, newStatus)
});

，然后订阅

observable.subscribe(({first, second}) => {
// do some thing with first and second value.
this.router.navigate([this.onComplete]);
})