Ionic5 tabs and navigation extras

I have a page displaying two tabs using ion-tabs. Each one references another component in my app.
THe first time the page is called I send in relevant data via NavigationExtras and everything works fine.
However if I click on one of the tabs to load the underlying components, there is no way (that I can see) to pass through the existing NavigationExtras?

I cant find a simple way to pass paramaters/data between tabs the same way as if I was coming from a different page and used Navigation Extras?

Is this not possible?

I’m curious about what the application domain is and what the two tabs are presenting, because, in my experience, almost every time I’m tempted to use tabs and run into something that doesn’t work smoothly, after I spend more time thinking about the design, I end up deciding tabs weren’t ever really a good UI fit in the first place.

In other words, hitting a situation where stuff you want to do with tabs is hard might indicate that you shouldn’t be dealing with tabs at all, and I’m wondering if that might be the situation you’re in.

To explicate further, the most canonical tabbed UI I can think of is where you have several “mini-apps” bundled together in one. An example would be a dungeon exploration game, where one tab shows the dungeon map, another the player inventory, another a chat window where one can talk to other explorers, and finally a journal of story events. Every single one of those is thoroughly independent of all the others. The player can switch back and forth freely between them, and each tab will be just as they left it the last time it was open.

A situation where I have seen people trying to use tabs that I think is a bad fit would be a product catalog, where we have a “list of search results” tab and a “single product detail” tab. The reason I think this is a bad UX is that it doesn’t correspond to how people typically interact with such an app, which is:

I want to buy a blender. I type “blender” in the searchbar, and get a bunch of blenders. I click on one that looks interesting, and see what details are available to consider when comparing to other options. Now I go back to the list and pick out several other possibilities, and flip amongst them comparing features.

This is impossible, because once I click the second blender in the search results, the “detail” tab switches to blender B, and blender A vanishes, nowhere to be found until I nuke blender B.

Somebody trying to implement a two-tab list/detail pattern would be concerned with “how do I convey which blender got selected out of tab A over to tab B”, which is what your question feels like to me.

If that is indeed the case, I fear that any attempt to directly answer your question (for example, you can shadow anything you would ordinarily do with router parameters with mutually injected services) might only serve to send you further down a path that you might eventually decide you didn’t want to go down in the first place.

I believe my use case is quite standard.
Viewing an instance of an object …eg a detail page and wanting to switch between different sections on that detail page…in this case a notification page and a settings page.
In ionic3 it was easy as paramaters could be passed into the tab directly.
Now I will have to do something else

In that case, would it be possible to think of “the currently selected thingy” as an app-wide concept? If so, I would incorporate that selection functionality into the service provider that fetches these objects in the first place. Each tab can independently inject that provider and subscribe to the currentSelection() Observable, and everything should just happen more or less automatically from there.

Thanks for the feedback. I will look into what you suggested, it does make sense. I would have thought that an approach that is parameterized would be better rather than making global “currentSelections” but maybe I have no choice here.
I had already made a change to start using an :id in the route since this seems to be more supported with tabs and then retrieve the object instance based on that id. But am having a very hard time trying to get the routing working on the child tabs to include the :id parameter. So may have to try what you suggested

Thank you again. Although this felt unnatural, it worked surprisingly well!
I still think it would be nicer if it was simpler to just easily parameterize the tabs and handle it all in the routing but this approach definitely works!

I can sympathize with that desire, but tabs exist in a realm beyond what the router chooses to concern itself with. I’m sure the Ionic team has seen the same zillions of threads here that I have over the years with people struggling with why tabs don’t behave like pages.

The choice I made several years ago was to limit my use of tabs to situations where they don’t interact with routing. Incidentally, segments present very similarly to tabs from a user perspective, and have none of this baggage. Of course, included in what I’m quasi-derisively calling “baggage” is a lot of functionality that’s desired in many situations, but there are also plenty of cases where it’s not desired, and the extra freedom to implement things that are unnatural with tabs can be welcome.

Good luck going forward.