ionViewDidEnter is not invoked on leaving a pushed page

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.

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

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.

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

: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.

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

1 Like

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.

@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:

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

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');
}

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.

@Dovel okey .Have a great day :smiley:

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

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.

1 Like

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:

: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.

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);
}

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.

Iā€™ve found a common solution, which is working for me as it should.

My root page is a tab-page, which includes five child pages. Within the five child pages, I push new pages on the highest parent level of the tab-page navController (this.navCtrl.parent.parent) to overlay the tab-page footer and have only the pushed page on the full screen.

That means, on every child page of the tab-page Iā€™m working with this.navCtrl.parent.parent and I push pages like this:

this.navCtrl.parent.parent.push(...);

Due to the fact that a child pages IonViewDidEnter will be only fired, when itā€™s getting the active page, and not, after a pushed page .pop()'s we need to set a custom listener on viewDidEnter on the highest parent of the navCtrl (this.navCtrl.parent.parent). Something like this:

// Constructor of a child-page within the tab-pages
constructor(
	private test: Test,
	private foo: Bar
) {	
	// Little workaround to observe the `viewDidEnter` event from the 'this.navCtrl.parent.parent'
	this.navCtrl.parent.parent.viewDidEnter.subscribe((data: any) => {

		// Here you should be able to detect, if a child page get's active again, after another page was 'push()'ed.
		
		// You can check the retrieved data, to make it only work, if a specific page firess `viewDidEnter`
		console.log(data);

		this.refreshMyData();
		return;
	});
	return;
}

Hope it helps someone :-).

Cheers
Unkn0wn0x

2 Likes

Perhaps all these frameworks make me a poor programmer.
But You are a genius

Actually I donā€™t understand why I see the same event viewDidEnter twice. Once from the page pushed via tabs and the second one TabsPage itself. I would have thought these framework geniuses would have provided a cleaner .subscribe() upon the page being push pop off the navigation stack. Instead I am repeatedly baffled by half-dozen ion-did/maybe/will/has/Occasionally/ā€¦Enter events that go thru one ear and then the other.

BTW, even if I had done the pushing of the UserOptionsPage via this.NavController.push( UserOptionsPage ) how is this.NavController.parent.parent.viewDidEnter subscription different from the ionViewDidEnter() in the same context which you discovered is NOT firing upon returning from the push?