Angulaire 2: comment forcer l'exécution d'une fonction après que tous les services sont prêts?

Question

export class InferencePageComponent implements OnInit { 

    constructor(private campaignService: CampaignService) { 
    this.campaignService.getStrategy1().subscribe(data => { 
     this.Strategy1 = data; 
    }); 
    this.campaignService.getStrategy2().subscribe(data => { 
     this.Strategy2 = data; 
    }); 
    this.campaignService.getStrategy3().subscribe(data => { 
     this.Strategy3 = data; 
    }); 
    } 

J'ai des données provenant de 3 fonctions différentes d'un service comme ci-dessus. J'ai également une fonction qui prend les données chargées de ces 3 services et fait un peu de traitement sur cela. Mais je ne suis pas en mesure de charger la fonction après que tous ces 3 services ont entièrement chargé. Quelle devrait être la bonne approche?

Answer 1

-vous gérer par forkJoin, forkJoin retourne des données lorsque tous les appels sont terminés et retour de résultat

Vous gérez tous ces appels à l'intérieur d'un service à l'aide forkJoin et vous abonner à l'intérieur du composant, une fois que vous obtenez les données vous pouvez appeler l'autre fonction.

Merging http observables using forkjoin

qui serait la meilleure façon de le résoudre, vous pouvez également utiliser observable.zip pour le faire sur votre composant lui-même.

Answer 2

vous pouvez utiliser Observable.zip(), Ci-dessous l'extrait de code qui peut vous aider.

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/zip'; 
// then in your component, do as below : 
Observable.zip( 
this.campaignService.getStrategy1(), 
this.campaignService.getStrategy2(), 
this.campaignService.getStrategy3() 
).subscribe(([Strategy1Data,Strategy2Data, Strategy3Data])) => { 
    this.Strategy1 = Strategy1Data; 
    this.Strategy2 = Strategy2Data; 
    this.Strategy3 = Strategy3Data; 
    this.yourFunctionForExtraProcess(); 
}