angular 2 - Share Service On Load

Question

I am trying to share service to a component, for this, I have created service.ts where the code looks like:

import { Subject } from \'rxjs/Subject\';

export cla         


        

Answer 1

I can suggest a work around for the ExpressionChangedAfterItHasBeenCheckedError.

This is a genuine error as pointed out by gunter here https://stackoverflow.com/a/43375600/2708210

what you can do is make the call inside of a setTimeout i had this issue and this was a work around.

 this.subscription = this.service.spinner$
  .subscribe(item => setTimeout(() => this.showProgress = item, 0)); 

This is a peice of code from my app git link

Answer 2

Subject will emit value its subscription when they are subscribe to it. When you're pushing value inside you CommonList from ngOnInit, it does emit value. But the underlying inner component(event subscription) haven't happened yet.

You could fix this issue just by using ngAfterViewInit lifecycle hook, where it ensures that inner Component tree have been initialize(expect content projection). Essentially it will ensure that component subscription have been happened.

ngAfterViewInit(){
  this.CommonService.CommonList.next([{"some_key":"some_value"}]); 
}

---

Or another way of achieving the same goal would be, use BehaviourSubject inspite of Subject. There difference between these two is BehaviourSubject store & emits its last subscription.