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.
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.
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.
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
And exactly this does not work. 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.
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.
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.
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);
}
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;
}
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?