Angular2 + RxJS BehaviorSubject subscription not working on all components

angular rxjs angular2-services behaviorsubject
Motassem MK picture Motassem MK · Sep 14, 2016 · Viewed 7.2k times · Source

I'm trying to make some sort of communication between my components, so I'm using a service with a BehaviorSubject and Subscription in the components like this:

Service (code related to the problem): 

import { BehaviorSubject } from 'rxjs/BehaviorSubject'

private _clientModalActionSource = new BehaviorSubject<string>('')
modalAction$ = this._clientModalActionSource.asObservable()
public updateClientModalAction(action) {
   this._clientModalActionSource.next(action)
   console.log('sent')
}

Component A :

this._api.updateClientModalAction(id)

Component B : 

import { Subscription } from 'rxjs/subscription'

private _subscription: Subscription
ngOnInit() { this._subscription = this._api.modalAction$.subscribe(res => {
   this.refreshModal(res)
   console.log('received')
})}

This is working perfectly if Component B is child of Component A, but if A is the root component and B is inside its <router-outlet> (or the opposite) nothing is being received to the subscription, I only get sent in the console.

what am I doing wrong?

Answer

Motassem MK picture Motassem MK · Sep 15, 2016

well the problem was simpler than I thought, I was not using the service on a higher level, I shouldn't have used providers: [ApiService] in each component, instead it should be only on the higher root component.

I hope this will help someone.

https://github.com/angular/angular/issues/11618#event-790191142

Related questions

What is the correct way to share the result of an Angular Http network call in RxJs 5?

By using Http, we call a method that does a network call and returns an http observable: getCustomer() { return this.http.get('/someUrl').map(res => res.json()); } If we take this observable and add multiple subscribers to it: …

Read More
Property 'subscribe' does not exist on type '() => Observable<any>'

service file import { Observable } from 'rxjs/Rx'; import { Http,Response} from '@angular/http'; import { Injectable } from '@angular/core'; import 'rxjs/add/operator/Map'; @Injectable() export class VideoService { private geturl = '/api/videos'; constructor(private _http:Http) { } getvideos() { return …

Read More
Property 'toPromise' does not exist on type 'Observable<Response>'

import { Headers, Http } from '@angular/http'; @Injectable() export class PublisherService{ private publishersUrl = 'app/publisher'; constructor(private http: Http) { } getPublishers(): Promise<Publisher[]>{ return this.http.get(this.publishersUrl) .toPromise() .then(response => response.json().data) .catch(this.handleError); } } …

Read More