Ionic 2+ How to access parent navController

There could potentially be scenarios when you will have something like this

Each of ion-nav components have their own NavController, when you try to push or pop a view, depending on the inheritance level of your ion-nav , the view will be pushed or popped from the view stack of the related NavController

Now there could be instances where you want to say set a Root page that would go under the parent Nav, This is how you would do it

Firstly we will import the App and NavController components in the Child component as shown below, both of these can be found under ionic-angular module

import { App, NavController } from 'ionic-angular';

Let’s say you want to make SettingsPage as your Application root, You will first import it like this,

then make sure that this exists in entryComponents and declarations arrays under app.module.ts file as shown below (if )

now we will provide the instance of App to your child component as shown below

Its now easy to get hold of NavController for the parent and set our SettingsPage as root, as shown below

OR

You can also pass on SettingsPage as a string value in case you want to stick with Lazy loading (give that the page has its own IonicPageModule), this method does not need you to add entries in entryComponents and declarations arrays under app.module.ts

This should work

There could potentially be another way, feel free to leave another method if you know any or if you find any issues with above approach.

Hope this helps

Cheers