SetRoot in Modal

Ionic Framework ionic-v3
1

In Ionic 3 as my first root I have a loginPage. Once the user logins a modal page is shown which has several profiles for the user to pick as follows. This modal is initiated in a service called AuthService.

image
Screen Shot 2017-04-28 at 8.26.26 PM.png739×329 15.2 KB

The user then connects to the profile they want and then is sent to the homePage. This is done in the ModalPage using the navController as follows:

constructor(public navController: NavController, public navParams: NavParams, public authService: AuthService) {
}
connect(): void {
this.navController.setRoot(HomePage);
}

My problem is I successfully am navigated to the HomePage however the menuToggle which opens the side menu does not work.
I’m guessing it is because I did a setRoot within Modal.

image

What would be the best way to setRoo to the HomePage within the Modal so that the menuToggle works?

Note, navController.push is not an option as I want the HomePage to be the root.

Thanks in advance.

2

Don’t know exactly but I would try

.1. Disable modal and navigate

 this.viewCtrl.dismiss().then(() => {
     this.navController.setRoot(HomePage);
 });

.2. Or use the main root navigation

this.app.getRootNav().setRoot(HomePage);

.3. Or disable and set main root

this.viewCtrl.dismiss().then(() => {
     this.app.getRootNav().setRoot(HomePage);
 });

or one of these and activate the menu in homepage

this.menuController.enable(true, 'yourMenuId');
6 Likes
3

Thanks Reed, solution
2. import { App } from ‘ionic-angular’;
this.app.getRootNav().setRoot(HomePage);

Worked like a charm!

1 Like
4

how you used this.app, you need import something?
it tells me that the property app does not exist on the current page

5

Yep you should inject it

constructor(private app:App) {}
1 Like
6

Thanks reedrichards.

I want to dismiss my modal and then go to the HomePage.

Solution #1 and #3 worked for me, though #3 is better because it cleared the stack while #1 did not.

I also tried this but it didn’t work:

    this.viewCtrl.dismiss().then(() => {
      this.navCtrl.popToRoot();
    });

I wonder why? Error: “Uncaught (in promise): no views in the stack to be removed”

7

Kind of an old solution so not sure anymore what was the context, but in v3 you kind of have different stack of navigation, specially if you have an app using tab, like a root one for the tabs and then a chain of navigation for the particular tab, that might explain why this particular navCtrl was empty, but not sure, I might say something wrong, it’s been some weeks for not saying months since I began to migrate to v4 :wink:

8

Solution 2 did not work for me, but solution 3 did! Thanks so much! I just discovered the bug, about an hour before I have to go present the app.

1 Like