ionViewDidEnter is not invoked on leaving a pushed page


#1

I have two pages, the home page with ionViewDidEnter (also tried ionViewWillEnter) and another page which will pushed with the NavigationController from the first page.
When I pushed the second page and close it again (navigate back) the event ionViewDidEnter is not involked agains. It behaves like ionViewDidLoad.
What should I do to have an event which will invoke if a page will enter and become the active page?

This does not work (snippets):

// First page
onButtonClick() {
  this.navCtrl.push(SecondPage);
}

// On second page navigate back to close the the page
// Back on first page.

ionViewDidEnter() {
  // Only called once on first enter.
  // Not called on navigation back from second page.
}

I know why. The first page will not close on pushing another page. But it becomes inactive and active again on navigation back. In the documentation of this livecylce-event this should work. Becuase the first page becomes active again.

The only solution I currently have is using setRoot and implement back navigation manually.


#2

Hi@Dovel

First of all ionViewDidEnter will not trigger while leaving a page.
It fires only once you entering to that page.If you want to trigger an event while leaving a page
you can use “ionViewDidLeave” event.

For further reference ionic Lifecycle events


#3

Thanks for reply. But this is not my topic. I want that the event ionViewDidEnter will called on every enter. Also if a pushed page will pop / close and navigate back.


#4

Hi@Dovel
If you want to trigger an event once while pushing a page you can use
ionViewDidload()


#5

:smiley: No, not once. I want to trigger the event ionViewDidEnter every time I enter the page. Also when I push another page via the view controller and close / navigate back again to the page with the event ionViewDidEnter. But this does not work. Only if I use setRoot or I pushed the page. But not when I re-entering the page on navigation back from another (pushed) page.


#6

Hi@Dovel
ionViewWillEnter event will help you for this.
That will trigger two times
1.you entering to a page via push
2.navigate back to the samepage
Page1–>Page2 as well as page1<----page2


#7

And exactly this does not work. :confused: The first entering works. But not if a pushed page is closed. Your 2. I also expected that the ionViewDidEnter is called on the first page after page2 is closes (navigated back). But nothing happens.


#8

@Dovel
Can you show how you return to page 1?
Is that via backbutton action?
Seems you are doing something wrong :face_with_raised_eyebrow:


#9

Over the back button in the navbar. Which is automatically applied from ionic on pushed pages.


#10

Then that will work perfectly :sunglasses:
Try this.If that working properly.you will get print ‘works fine’ two times
after you push and pop the page

IonViewWillEnter(){
console.log('works fine');
}

#11

Argh, this does not work in my case. … I’ll try this in a new project for demonstration. Maybe a bug of ionic or my project. I’ll write back. Thanks so far.


#12

@Dovel okey .Have a great day :smiley:


#13

I’ve created a demo project. Download here: https://we.tl/5T8Zz8xHgy


#14

I’ve looked at your code and I’ve found the issue.

You have 2 ion-nav’s in your application (in home.html and app.html). I don’t really recommend that.

When you return from your AboutPage, the nav from home.html gets triggered. So when you add ionViewDidEnter to the HomePage, things work.

But why did you move the code from app.html to home.html? That’s looking for issues with animation, navigations and lifecycle events.


#15

Thanks for your analysis. You’re right. The structure seems to be the issue. I’ll try to fix it. So Ion-Nav only appears once in the code. I’ll write back for status update. :slight_smile:


#16

:thinking: I cannot use the NavController in app.component.ts. Error:

StaticInjectorError (AppModule)[Nav -> NavController]: 
StaticInjectorError(Platform: core)[Nav -> NavController]:
NullInjectorError: No provider for NavController!

Maybe it’s to early using this in app.component.ts?
Usually the NavController is not directly imported in app.module.ts as provider. It’s an ionic module.

I tried to push a page from app.component.ts. This is a part of my fix to resolve two ion-nav.
Later I want to access a global side menu (ion-menu) from every page. … so far to the background.
But, no problemo I do it in another way. Workaround. But I wondering, why is it impossible to use the NavController in app.component.ts?

If I should use the ion-nav only on one page (app.component) I have no idea how to use a global ion-menu for all pages which sould use NavControler on menu item select. I can’t fix the problem of two ion-navs while the app.component can’t use the NavController in his constructor.


#17

I’ve found a solution for my NavController in app.component issue.
Remove the AppController from import and constructor and load the ion-nav with ViewChild.

import { Nav } from 'ionic-angular';
// [...]
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  // [...]
}

onMenuButtonClick() {
  this.nav.push(AboutPage);
}

#18

Ok, I fixed the problem by using ion-nav only once (at app.component) AND for the NavController use ViewChild as described in my post above.