SetPages with NavController

Ionic Framework
1

Good morning,

I am migrating to Ionic4 and I have a question about the way of navigating between pages.

I am using NavController with goRoot, goForward and goBack.

Now I want to be able to set a stack of opened pages when I select a new route from a Menu. I don´t know how to use something similar to the setPages method that I was using with Ionic 3.

I need to set a new Root page and a children.

I have tried this but is not working:

this.navCtrl.goRoot(’/rootPage’);
this.navCtrl.goForward(’/rootPage/children’);

2

The NavController is gone. My suggestion is that you take a day and build an Angular-only app from your favorite Angular tutorial. The routing for that app will be the same as what you will use in Ionic 4. (Modals and popovers are still special in Ionic 4. Mostly.)

3

Thanks for you reply.

I was following this tutorial to make the changes needed:

Converting Ionic 3 Push/Pop Navigation to Angular Routing in Ionic 4

It explains how to go forward, backwards or set a new root but what I need is to set a new entire stack of routes.

I don´t know if it is possible using Angular Routes or if I can do it with NavController.

Regards.

4

That tutorial warns you that the NavController in Ionic 4 is unstable, might be renamed, have different properties, etc. Nobody knows the answer to your question, maybe not even the devs. If you can avoid using NavController, you should. People have been writing Angular apps for years without it. My advice is still the same as it was in my previous post.

5

How do you indicate the “router direction” when using the Angular router? The NavController in the latest beta (as described in the article above) is basically just a wrapper around angular routing but also lets you indicate “direction” (forward, back, root) which Ionic uses to select the appropriate animation.

Since NavController isn’t in the latest docs I’m guessing it’s going to be removed but that leaves a gap in functionality. You can still indicate direction in your template

<ion-item [routerDirection]="'root'" [routerLink]="[p.url]">

But there is no way to give that direction hint if you need to navigate programmatically.

To the original poster, the NavController.goRoot/Forward/Back are currently working for me. Are you sure you have routes defined that match? Check your browser console, is it spitting out any errors?

1 Like
6

Good morning,

Angular routes is working okey for me and my routes are well defined in the corresponding routing.ts.
My problem is that when I navigate through my menu, navCtrl saves the stack of pages where I have passed. Then using the ion-back-button it goes back page by page until it arrives to my main page.
I want to navigate directly to my main page when I click the ion-back-button so I need to have always ‘main/start’ as root and then goForward the selected menuOption.

          this.navCtrl.goRoot('main/start');
          this.navCtrl.goForward(menuOption);

But this code is not working and it keeps saving all the pages visited from the menu in the stack.

7

Bump. Any updates on this? Ionic 5 in the meantime, still no documentation how to navigate to a page within a stack like main/start… Bit weird imo…

I love ionic and have been using it since v1 but lately I have been thinking about switching just because the docs are not maintained AT ALL.