Hi
I have a tab application with a toolbar at the bottom and a list inside a tab:
![App]()
Navigation is controlled by a router you can see the routes below.
app-routing.module -> loads -> tabs-routing.module -> loads -> protocols-routing.module -> loads -> p-gisha-clalit-routing.module && p-dom-lev-mevigarim-routing.module
Selecting a list item should load a page in the tab area.
while the tab buttons works perfectly, when I click the list items I do not get any response. If I click the second list item which points to routerLink="/tabs/medsequipment" the app loads the correct page. But, when I click the top list item which has routerLink=“p-gisha-clalit” the app does nothing. It mite be loading some default page but the visual effect is a click animation with no reaction.
I suppose the route is broken in some place but I cant find the problem in that route.
Ill appreciate any incites.
Thanks
Erez
---------------- app code below ------
App routing:
tabs-routing.module:
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'protocols',
loadChildren: '../protocols/protocols.module#ProtocolsPageModule'
},
{
path: 'medsequipment',
loadChildren: '../medsequipment/medsequipment.module#MedsequipmentPageModule'
},
{
path: 'gentables',
loadChildren: '../gentables/gentables.module#GentablesPageModule'
},
{
path: 'directive',
loadChildren: '../directive/directive.module#DirectivePageModule'
}
]
},
{
path: '',
redirectTo: 'tabs/protocols'
}
];
protocols-routing.module:
const routes: Routes = [
{
path: '',
component: ProtocolsPage,
children: [
{
path: 'p-gisha-clalit',
loadChildren: '../protocolsPages/p-gisha-clalit/p-gisha-clalit.module#PGishaClalitPageModule'
},
{
path: 'p-dom-lev-mevigarim',
loadChildren: '../protocolsPages/p-dom-lev-mevigarim/p-dom-lev-mevigarim.module#PDomLevMevigarimPageModule'
}
]
},
{
path: '',
redirectTo: 'tabs/protocols'
}
];
p-gisha-clalit-routing.module && p-dom-lev-mevigarim-routing.module
are very similar. p-gisha-clalit-routing.module is:
const routes: Routes = [
{
path: '',
component: PGishaClalitPage
}
];
The list in protocols is:
<ion-content>
<ion-list>
<ion-item class="HEBListItem" detail ="false" routerLink="p-gisha-clalit">
<ion-label>גישה כללית למטופל</ion-label>
<ion-icon name="caret-back-outline" item-right></ion-icon>
</ion-item>
<ion-item class="HEBListItem" detail ="false" routerLink="/tabs/medsequipment">
<ion-label>דום לב במבוגר</ion-label>
<ion-icon name="caret-back-outline" item-right></ion-icon>
</ion-item>
</ion-list>
</ion-content>
