Angular 2 - Subscription to service Subject property doesn't catch events

Question

Here is service:

@Injectable() 
export class AuthService {

  public reset: Subject<any>;

  constructor() {
    this.reset = new Subject();
  }

  public logout() {
   this.reset.next('logout');
  }
}

This is another service which wants to know when logout() happens:

@Injectable()
export class StoreService() {

  constructor(private auth: AuthService) {

    this.auth.changes.subscribe((value) => {
      // Do not work God knows why
    });
  }
}

Subscription in the second service will never get any events. Why?

Sorry, auth.changes is just a getter that returns reset property — Andrey Kutsenko, Oct 11 '16 at 12:44
Can you also show how you create `changes` getter (or whatever it is)? — martin, Oct 11 '16 at 13:13
@Martin Yes, of course, here it is: `public get changes() { return this.reset; }` This one I tried too: `public get changes() { return this.reset.asObservable(); }` — Andrey Kutsenko, Oct 11 '16 at 13:16
I'm actually suspicious it has something to do with how you set your `providers`. You might be working with multiple instances of `StoreService`. Maybe have a look at these links: http://stackoverflow.com/questions/39958238/shared-service-in-angular2/39958330#39958330 — martin, Oct 11 '16 at 13:17
Ok, AuthService is provided by one module, Store service by another. Both of these modules are included by app.main.module. Anyway, provider for AuthService only one. — Andrey Kutsenko, Oct 11 '16 at 13:23
@Martin Thank you, I found a problem. It was two instances of AuthService, really. Easy to catch by adding next to service constructor: `console.log(\`Create ${counter++} instance of AuthService\`);` — Andrey Kutsenko, Oct 11 '16 at 13:37

score 3 · Answer 1 · answered Oct 11 '16 at 13:55

I found the problem - there were multiple instances of AuthService (Thank you @Martin). The problem is if somebody adds provide: [AnyService] to any component, there will be no errors but you will get two (or more) instances of service. This kind of bug can be easily found by add console.log(counter++) to service constructor.

score 1 · Answer 2 · answered Oct 11 '16 at 12:44

@Injectable() 
export class AuthService {

  public reset: Subject<any>;
  reset$ = null;

  constructor() {
    this.reset = new Subject();
    this.reset$ = this.reset.asObservable();
  }

  public logout() {
   this.reset.next('logout');
  }
}

And other service consuming it subscribe to the event.

@Injectable()
export class StoreService() {

  constructor(private auth: AuthService) {

    this.auth.reset$.subscribe((value) => {
      console.log(value);
      //implement your own logic here
    });
  }
}

This is actually what I was looking for. Thx! – Tawani May 12 '17 at 17:16 — Tawani, May 12 '17 at 17:16

score 0 · Answer 3 · answered Oct 11 '16 at 12:43

0

You have to define Observable string to which you can subscribe in another service or component :

@Injectable() 
export class AuthService {

  public reset: Subject<any>;
  /**
   * Observable string streams
   */
  notifyObservable$ = this.reset.asObservable();


  constructor() {
    this.reset = new Subject();
  }

  public logout() {
   this.reset.next('logout');
  }
}

// StorageService

@Injectable()
export class StoreService() {

  constructor(private auth: AuthService) {

    this.auth.notifyObservable$.subscribe((value) => {
      // Do not work God knows why
    });
  }
}

answered Oct 11 '16 at 12:43

ranakrunal9

13,320
3
42
43

Thank you for your answer, but Subject already returns Observable, why I have to call asObservable() on Observable? Anyway, it still not working – Andrey Kutsenko Oct 11 '16 at 12:52
you can check answer http://stackoverflow.com/questions/39738974/can-i-emmit-the-event-from-parent-to-child-in-angular2/39739184#39739184 for your reference – ranakrunal9 Oct 11 '16 at 12:58
Communication between service and component or between two components through service works excellent but it's not my case. I faced with the situation when one service doesn't get any events from another one. And it doesn't matter what kind of event emitter I use - it can be EventEmitter class or Subject, still not working ( – Andrey Kutsenko Oct 11 '16 at 13:04

Angular 2 - Subscription to service Subject property doesn't catch events

3 Answers3