angular - Rx Observable not updating when other component causes its data to update and call next -

in angular2 app have rx observable exposed view. observable created in store , passed component via subject.asobservable

i having problem getting page's reference register next() being called on subject if operation on sub-page initiates action, works if same page calls store.

below shows layout , flow of item, , below illustrate in case fails.

base.store, houses subjects next() call

  options: { collection: string };   _subject$: subject<array<any>>;   protected datastore: {};    constructor(protected http: http) { }   init(options) {     this.options = options;     this.datastore = {};     this.datastore[options.collection] = [];     this._subject$ = <subject<array<any>>>new subject();     this.load();   }    load() {     this.http.get(endpointurl).map(response => response.json()).subscribe(       data => {         this.datastore[this.options.collection] = data;         this._subject$.next(this.datastore[this.options.collection]);       }),       err => console.log("error load", err));   }    addentity(entity: any) {     this.http.post(endpointurl, entity).subscribe(       data => this.load(),       err => console.log("error addentity", err));   } 

contacts.store, exposes subject asobservable

export class contactstore extends basestore {    protected _subject$: subject<array<contact>>;   options;    constructor(protected http: http) {     super(http);      this.options = { collection: "contacts" };     this.init(this.options);   }    contacts$() {     return this._subject$.asobservable();   }    addorupdatecontact(contact: contact) {     if(contact._id) this.updateentity(contact);     else this.addentity(contact);   } 

contacts.component, consumes observable , displays list

  public contacts$: observable<array<contact>>;    constructor(private contactsstore: contactstore) {     this.contacts$ = this.contactsstore.contacts$;   }     

contacts.view, displays contact

<ion-item *ngfor="let contact of contacts$ | async">{{contact.name}}</ion-item> 

now illustrate problem, use following line of code add new contact; this.contactsstore.addorupdatecontact(contact);

• if add contact while contact.view active, view updates , works great
• if add contact on sub-page (ex; contact.detail), when return parent view contact page doesn't reflect newly added contact
• if once i'm back, add contact parent page, view updates , shows both new contacts!
• if navigate away , return contacts view show new contact

i attached subscribe event item everywhere in attempt debug. findings seem highlight issue.

the subscribe within contact.store catches add , emits , update. subscribe within contact.component if it's active page, not if add action happens while i'm in different component.

how can ensure does, or refreshes once return page?

since seems issue caused subscribe event not happening in contacts.component tried manually triggering updates ngzone , applicationref.tick, neither solved issue.

to debug emit event "contacts.loaded" following subject.next(). subscribe event on contacts.component. fires in case when view doesn't update. tried putting in changedetectorref.detectchanges() no avail.

i assume provide service more once. don't add providers: [] of @component() instead of @ngmodule() single service instance whole application, otherwise service instance each component instance.