Ionic 4 - Nested Tabs Relative Routes

@aharonDLis wrote:

HI
I have an app that has two sets of tabs, one off the main home page

<ion-tab-bar slot="bottom">
	<ion-tab-button *ngFor="let tab of tabs" tab="{{tab.name}}">
		<ion-icon name="{{tab.icon}}"></ion-icon>
		<ion-label>{{tab.name|titlecase}}</ion-label>
	</ion-tab-button>
</ion-tab-bar>

const routes: Routes = [{
	path: '',
	component: HomePage,
	children: [
		{ path: '', redirectTo: 'prospecting', pathMatch: 'full' },
		{ path: 'prospecting', children: [{ path: '', loadChildren: './prospecting/prospecting.module#ProspectingPageModule' }] },
		{ path: 'approvals', children: [{ path: '', loadChildren: './approvals/approvals.module#ApprovalsPageModule' }] },
		{ path: 'interactions', children: [{ path: '', loadChildren: './interactions/interactions.module#InteractionsPageModule' }] },
		{ path: 'bookings', children: [{ path: '', loadChildren: './bookings/bookings.module#BookingsPageModule' }] }
	]
}];

The above all works 100% and the associated tabs all style correctly, highlighting the active tab associated with the relevant route.

I have a second set of tabs nest within one of my child routes

<ion-tab-bar slot="top">
	<ion-tab-button [routerLink]="['web']" layout="icon-end">
		<ion-icon name="globe"></ion-icon>
		<ion-label>Web</ion-label>
	</ion-tab-button>

	<ion-tab-button [routerLink]="['old-companies']" layout="icon-end">
		<ion-icon name="briefcase"></ion-icon>
		<ion-label>Old Companies</ion-label>
	</ion-tab-button>

	<ion-tab-button [routerLink]="['itc']" layout="icon-end">
		<ion-icon name="filing"></ion-icon>
		<ion-label>ITC</ion-label>
	</ion-tab-button>

	<ion-tab-button [routerLink]="['external']" layout="icon-end">
		<ion-icon name="business"></ion-icon>
		<ion-label>External</ion-label>
	</ion-tab-button>
</ion-tab-bar>

const routes: Routes = [{
	path: '',
	component: ProspectingPage,
	children: [
		{ path: '', redirectTo: 'web', pathMatch: 'full' },
		{ path: 'web', children: [{ path: '', loadChildren: './web/web.module#WebPageModule' }] },
		{ path: 'old-companies', children: [{ path: '', loadChildren: './old-companies/old-companies.module#OldCompaniesPageModule' }] },
		{ path: 'itc', children: [{ path: '', loadChildren: './itc/itc.module#ItcPageModule' }] },
		{ path: 'external', children: [{ path: '', loadChildren: './external/external.module#ExternalPageModule' }] }]
}];

I can only get the nested tabs to work by using “[routerLink]” as when I just use the tab=“name” property my application does not keep the route relative and attempts to overwrite the route from the home page and comes up with routing errors, that being said the above all works except for the fact now when navigating around the nested paths the relevant tabs don’t display in an activated state and always appear is if they are not selected, if I use the tab=“name” property on first load everything loads correctly and the tab shows activated as the route matches the name, but you can’t click the actual tabs without causing an error.

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment

Is there a way to either use the “[routerLink]” and show the correct activated tab style or use the tab=“name” property and have the route resolve relative to it’s current location?

Posts: 1

Participants: 1

Read full topic