I am using ion-tabs for my frontend angular ionic app. I am using nested tabs, So 1st ion-tabs have 3 tabs, Tab 1, Tab 2, feature-tabs and feature-tabs has 3 tabs, Tab 4, Tab 5, Tab 6. I have used the Angular routing.
So the routes look like the following:
- tabs/tab1,
- tabs/tab2,
- tabs/feature-tabs/tab4,
- tabs/feature-tabs/tab5,
- tabs/feature-tabs/tab6
The issue when feature-tabs is selected Tab 4 is the active route by default but the property ‘tab’ in the ion-tab-button when kept similar to the path (i.e. tab =“tab4”) in the routing the default as recommended Tab 4 works but selecting/click on the tabs gives an error of Cannot match any routes. URL Segment: ‘tabs/tab1’. This means that the ‘tab’ property of the ion-tab-button is referring to the parent tabs. When I change the property ‘tab’ in the ion-tab-button to “feature-tabs/tab4” (not recommended), everything works but the --color-selected css property of the ion-tab-button doesn’t work. But my question is why the tab property is referring to the patent tabs and how can I refer back to the child feature-tabs?
I have already tired to change the css property but it simply doesn’t work,
ion-tab-button{
--color-selected: #a0a;
}
This is my routing for the tabs,
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: '',
component: TabsPage,
children: [
{
path: 'tab2',
loadChildren: './../tab2/tab2.module#Tab2PageModule'
},
{
path: 'tab1',
children: [
{
path: '',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
}
]
}
]
},
{
path: 'feature-tabs',
loadChildren: '../feature-tabs/feature-tabs.module#FeatureTabsPageModule'
},
{
path: '',
redirectTo: './tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsRoutingModule { }
This is tabs html,
<ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-label>Tab1</ion-label>
<ion-icon name="pricetags"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>Tab2</ion-label>
<ion-icon name="podium"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="feature-tabs">
<ion-label>Feature tabs</ion-label>
<ion-icon name="cash"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
this is my feature-tabs routes:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureTabsPage } from './feature-tabs.page';
const routes: Routes = [
{
path: '',
component: FeatureTabsPage,
children: [
{
path: 'tab4',
children: [
{
path: '',
loadChildren: './../tab4/tab4.module#Tab4PageModule'
}
]
},
{
path: 'tab5',
children: [
{
path: '',
loadChildren: './../tab5/tab5.module#Tab5PageModule'
}
]
},
{
path: 'tab6',
children: [
{
path: '',
loadChildren: './../tab6/tab6.module#Tab6PageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/feature-tabs/tab4',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/feature-tabs/tab4',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class FeatureTabsRoutingModule {}
this is the html for the feature-tabs:
<ion-content>
<ion-tabs>
<ion-tab-bar slot="top">
<ion-tab-button tab="tab4">
<ion-icon name="calendar"></ion-icon>
<ion-label>tab4</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab5">
<ion-icon name="contacts"></ion-icon>
<ion-label>tab5</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab6">
<ion-icon name="information-circle"></ion-icon>
<ion-label>tab6</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>