2016-07-14 33 views
5

Così ho appena iniziato a programmare con Angular 2 e ho appena iniziato a studiare su subscribe, Subject e BehaviorSubject. Attualmente ho più abbonamenti per ottenere i valori memorizzati nel mio servizio ed emessi su un componente. La mia applicazione funziona e tutto ma so che è molto inefficiente. Che ha preso la mano nella mia componente:Come combinare più Observable insieme in Angular 2

this.threatService.minLimitChange$.subscribe(min => { this.min = min; this.getSession();}); 
this.threatService.maxLimitChange$.subscribe(max => { this.max = max; this.getSession();}); 

(e come 5 altri più che ottiene un singolo valore e chiama la funzione getSession() ogni volta)

Nella mia threat.service:

private minLimitChangeSource = new BehaviorSubject<number>(this.min); 
private maxLimitChangeSource = new BehaviorSubject<number>(this.max); 
minLimitChange$ = this.minLimitChangeSource.asObservable(); 
maxLimitChange$ = this.maxLimitChangeSource.asObservable(); 

Così ho cercato:

this.threatService.minLimitChange$.concat(this.threatService.maxLimitChange$).subscribe(res => console.log(res)); 

che il mio obiettivo era solo quello di testare quanto res era perché non ero sicuro di come accedere ai due valori ... ma sto ricevendo questo nella mia console. ;/

TypeError: this.threatService.minLimitChange$.merge is not a function. (In 'this.threatService.minLimitChange$.concat(this.threatService.maxLimitChange$)', 'this.threatService.minLimitChange$.concat' is undefined) 

In definitiva, mi piacerebbe ottenere tutti i valori che getSession() ha bisogno dal mio servizio ed eseguire quella funzione volta. Gradirei davvero qualsiasi aiuto o spiegazione su come utilizzare concat, unire o forkJoin per combinare le mie sottoscrizioni per favore. Grazie!

risposta

10

È possibile utilizzare Observable.combineLatest per combinare 2 flussi osservabili in uno:

combineObs = obs1.combineLatest(obs2, 
    (val1, val2) => { 
    return {val1: val1, val2: val2}; 
    }); 

plunker di lavoro: http://plnkr.co/edit/mmCzEmdKexpaWNM53me9?p=preview

+0

Ah vedo! Ciò sembra vicino a ciò che voglio comunque, non uso i valori tramite il metodo {{}} nell'html. La mia applicazione è in realtà un generatore di grafici che mostra i punti dati in base al cursore nel componente dell'interfaccia utente. Quindi i flussi di dati: Dispositivo di scorrimento in ** Componente dell'interfaccia utente ** invia valori massimo e minimo> ** Servizio ** memorizza ed emette nel sottoscrittore> ** Componente grafico ** esegue una funzione con tali valori. Quindi, se dovessi posizionare combineLatest nel mio componente grafico, come lo assegnerei localmente nei valori massimo e minimo del componente? – mshantic

+0

Ehi, controlla il link al plnkr allegato. Fondamentalmente l'idea è quella di raggiungere il tuo compito in 2 fasi: 1. Combina due stream in uno, il terzo stream emetterà un nuovo valore ogni volta che uno dei flussi sorgente ha un nuovo valore; 2. Ascoltare lo stream combinato e popolare i dati locali in base ai dati combinati. Ho dimostrato entrambi nel plnkr. –

+1

Grazie! Funziona e riduce un sacco di codice ridondante. È stato perso perché non avevo una classe come Impostazioni e avevo un servizio separato e un componente principale, quindi le funzioni e le variabili non sono insieme come il tuo plunker. Ma ora capisco (: Grazie ancora! – mshantic