How to retrieve one of the other tab nav controllers?

Ionic Framework ionic-v3
1

I’m really struggling with tab navigation.

As I understand it, each tab has it’s own navigation stack and when I request an instance of the navController it will automatically get the nearest navigation controller, right?

So I have a basic 3-tab application. From tab 2, I want to clear the navigation stack of that one then I want to move to a different tab and push a page onto that stack. However, from the documentation I’m struggling to figure out how to do this.

At the moment, I’m using this.navCtrl.popToRoot() to clear the navigation stack of the current tab. That kinda appears to work. Next, I’m using this.navCtrl.parent.select(TabsPage.AccountTab) to navigate over to the AccountTab, but I don’t want to go to the root of that tab, I want to navigate to a different page on that navigation stack. How do I achieve that?

Is it possible to retrieve an instance of the AccountTab controller, push a page onto it’s stack and THEN move the user to that page? At the moment, I can only switch over to the root of the Account tab.

Thank you for reading and much love to anyone willing to gimme a hand!

UPDATE: One thing I tried without success is publishing an event when I’m in Tab 2 and then subscribing to the event from the root page of Tab 3, but the event doesn’t get executed for some reason!

UPDATE 2:
On another thread, someone suggested this code, which seemed to work for me:

setTimeout(() => {this.navCtrl.parent.getSelected().push(OrderStatusPage)}, 100);

I have no idea how that makes it work for me though, and it seems a bit dodgy!

Surely, there’s a better way?

2

Use of setTimeout is almost always wrong. The reason is that an Ionic app might run on dramatically different types of devices, so the amount of time you have to wait might vary dramatically. Instead, listen for an ack, using a Promise or an Observable.

So I recommend you listen to NavController.viewWillEnter or a similar stream, and execute whatever you want, once you really do enter.

3

Do you have any examples? One thing I tried was having a Promise on the end of the select, e.g.

var accountNav = navCtrl.parent.select(Tabs.AccountTab).then(onsuccess => {accountNav.push(OrderStatusPage);});

but the code doesn’t appear to be executed (e.g. when i added a statement logging out to the console I didn’t see it get output).

thanks

4

As a user, I want tabs to be completely self-contained worlds. If I am currently on tab A, and I switch to tab B, do whatever, and then switch back to tab A, it should be exactly as I left it. Nothing that I do in “tab B world” should have any effect on “tab A world”, with the exception of something like a logout that eliminates some tab A functionality.

So I think part of the problem here is that you’re trying to make tabs act contrary to their nature. Whenever I have found myself in a similar situation, I reevaluated whether tabs were really the best UI fit, and most of the time had to conclude “perhaps not”.

5

I suppose so! thanks for your insight, it’s appreciated!