Ionic Events - Unsubscribe in only one component

Ionic Framework ionic-v3
1

I am having troubles with Ionic’s events system. The issue is I have page 1 with a component which subscribes to a topic in constructor. For example

constructor(private events: Events) {   
  events.subscribe('topic', (obj) => {
      // Do Something
  });
}

From this page I navigate by push to another page called page 2. This also subscribes to the same ‘topic’. I also have implemented to unsubscribe from the ‘topic’ when page 2 is destroyed. eg

ngOnDestroy(): void {
  this.events.unsubscribe('topic');
}

The issue I have is when I navigate back to page 1, by unsubscribing to ‘topic’ in page 2, it stops page 1 from listening to ‘topic’ as well which I do not want.

Am I using this correctly? Is this a bug or on purpose? Is there a work around besides not unsubscribing to ‘topic’ in page 2.

2

unsubscribe takes a second parameter - the handler. If you omit it, as you apparently are, it unsubscribes everybody. Personally, I find Observables superior to Events, because they have type declarations and don’t rely on strings, so they’re less typo-prone.

2 Likes
3

Ok so I don’t need to panic just yet! So what would it look like for the component to just unsubscribe so far I have tried:

//Below unsubscribes all
this.events.unsubscribe(‘employee:search-select’, null);

//Below does not unsubscribe the component
this.events.unsubscribe(‘employee:search-select’, ()=>{});

It’s funny before making this thread I was thinking of messaging you directly as you always answer the roadblocks I come into! Thanks for all your help.

4

Ignore above I saw your solution and it works: Events Pub/Sub How to unsubscribe in lifecycle hook

For something that should be straightforward it is convoluted!