Page Lifecycle & SetTimeOut

Ionic Framework ionic-v3
1

I have a few pages that you can navigate using Tabs.

Every page has a timer, that I start/stop when you go from one page to another.

In order to do that, I’m using the “ionViewDidEnter” to start it:

ionViewDidEnter() {
//Start periodic Refresh
this.timerId = setInterval(() => {
this.refreshValues()
}, 10000);
}

and

ionViewDidLeave() {
//Stop refresh
clearTimeout(this.timerId);
}

to Stop it.

This works fine, as long as you navigate from tab to tab.

But, if you open a page from the side menu:

openEdit() {
this.nav.setRoot(MyNoTabPage);
}

The “ionViewDidLeave” event is not executed. I did also try using: ionViewWillLeave, ionViewWillUnload and ionViewDidUnload but none of them are executed.

Any ideas how can address that?

Thanks

(I’m using RC3, but same happened in RC2)

2

maybe try to set the root on the main navigation?

this.app.getRootNav().setRoot(MyNoTabPage);
3

Thanks for the quick reply. But although it navigates fine, the event is not executed neither.

4

sorry to hear that. for me it worked, I learned that from the ionic github issue list. maybe you will find some ideas there

5

Just to double check I’m doing it right,

In my app.components.js I added:
import { App, … } from ‘ionic-angular’;

export class MyApp {
  constructor(...
              private app: App
              ) {

Then used:
this.app.getRootNav().setRoot(MyNoTabPage);

Do I am missing something?

Thanks again!

6

Yes, at least it is what I had in mind unfortunately. Sorry that it didn’t worked out

7

No worries. Thank you very much!

8

Maybe you could try that:

Declare your nav like following:

 @ViewChild(Nav) nav: Nav;

and then

 this.nav.setRoot(MyNoTabPage);

that’s the last idea I’ve got how to set the root from app.component

9

Thanks again. That is what I was originally using.

10

I have a similar issue to the lifecycle events not firing but not on tabs.

For me the lifcycle events (ionViewWillLeave and ionViewDidLeave) aren’t firing when I press the back icon.

11

damned :wink:

well then definitely don’t know, hope you will find soon

12

Hi leandrrr,

If you don’t mind can you please send the full code how to give timer to each page.

13

Hi,

I’m sorry I don’t have the code handy.

This is what I remember I did, definitely not the an ideal solution, but it worked.

When executing the “setInterval”, I did store the value returned in a “global” place, in my case a singleton object that I use to keep the application status.

Then, on every “ionViewDidEnter”, I check for that id, stop the previous timer and start a new one.

In summary, since I can’t stop it on every “ionViewDidLeave”, I keep a reference and stop it in the “ionViewDidEnter”.

//Stops previous timer
if (this.XXX.CurrentTimer != null) {
clearTimeout(this.XXX.CurrentTimer);
}

//Starts a new one, and store the reference to stop it in the next enter
this.XXX.CurrentTimer = setInterval(() => {
this.refreshValues()
}, ms);

Hope this helps!

14

Buddy, try this -

ionViewWillLeave() {
clearInterval(this.task);
}

ionViewDidEnter() {
this.task = setInterval(() => {
this.getMsg(false);
}, 3000);
}

Working for me.