Trouble with Lifecycle Events and Ionic Eevents

Hi,

in my app, the user can go from the HomePage to another page via this.navCtrl.push(PhotoPage), and from there back to the HomePage via this.navCtrl.setRoot(HomePage).

On certain events on the PhotoPage I want to show a Toast on HomePage. For this I’m using Event publish/subscribe. PhotoPage publishes an event in the constructor (this.events.publish('someEvent')) and HomePage listens to it: this.events.subscribe('someEvent', (eventData) => { this.presentToast("some text") })

Now what happens is that when the app does the navCtrl.setRoot(HomePage) back to the HomePage, the Toast appears at least twice (more precisely: 1+ as many times as the PhotoPage was displayed and then this.navCtrl.setRoot(HomePage) is called), which means that the old HomePage(s) are somehow still in the stack.

To get around multiple Toasts, I’ve tried ionViewDidLeave = () => { this.events.unsubscribe('photo.added'); } on the HomePage, but then … no Toasts at all appear!

Am I using the events (Events and Lifecycle Events) incorrectly? What am I missing?

1 Like

I have similar problem.

I push FiltersPage from HomePage. I publish event from ionViewWillLeave of FiltersPage and subscribe to this event in ionViewWillEnter of HomePage. I go back to HomePage by clicking ‘back’ button.

When I ‘catch’ this event in HomePage, it appears as many times as I opened FilterPage and went back to HomePage, i.e. first time - 2, second time - 3, third time - 4, and so on.

The event itself fires only once as expected. ionViewWillEnter of HomePage is called only once as expected. I also checked my navigation stack. Works as expected too. And nevertheless, it seems the number of times events.subscirbe fires is accumulative.

Any ideas would be highly appreciated. Thanks.

I found this open issue:

and another thread dealing with the same issue:

But it seems there wasn’t any activity on either of them for the last month.

1 Like

I Found The Solution

Add Code Inside Of constructor of this.event.subscribe("",""); Method, Instead of Other ionViewWillLeave or ionViewWillEnter & Don’t Forget To Destroy

ngOnDestroy(){
this.event.unsubscribe(‘reloadCoupon’);
}

Example :
this.event.subscribe(‘reloadDetails’,() => {
// Your Code Here
});

Thanks :slight_smile:

2 Likes

Try replacing setRoot with popTo, seems to have worked for my project.

I had a SearchPage that created a Modal, and onDidDismiss would call setRoot to the Home Page,
this ModalPage was publishing an event and the HomePage was subscribing to the event,
I found that each time I added a search result item it would increment the instance of the result

So the first time you did a search and added the result it seemed like everything was working.
But if you added a second result, it would appear twice in the list on the HomePage, etc etc

So I tried wrapping the subscription (at HomePage) in all the different lifecycle hooks both Ionic and Angular – but it didn’t work as this topic states)

But then I read in all the forums that too many setRoot calls causes the constructor/page to fire multiple times (Constructor and lifecycle events fires twice)

So I replaced setRoot with popTo, and it now works as expected.