Hi there,
I am using a tabbed page where I send an object via NavigationExtras. this works just fine.
And from there, I want to send the horseId to the tabs.
The HTML of the root tab page (horse-detail):
<ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom" color="primary">
<ion-tab-button tab="horse-size/{{horseId}}">
<ion-label>Größen</ion-label>
</ion-tab-button>
<ion-tab-button tab="horse-food/{{horseId}}">
<ion-label>Futter</ion-label>
</ion-tab-button>
<ion-tab-button tab="horse-health/{{horseId}}">
<ion-label>Gesundheit</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
My routes in router module of the tab root page (horse-detail):
const routes: Routes = [
{
path: 'horse-detail',
component: HorseDetailPage,
children: [
{
path: 'horse-size',
children: [
{
path: '',
loadChildren: '../horse-size/horse-size.module#HorseSizePageModule'
}
]
},
{
path: 'horse-size/:horseId',
children: [
{
path: '',
loadChildren: '../horse-size/horse-size.module#HorseSizePageModule'
}
]
},
{
path: 'horse-food',
children: [
{
path: '',
loadChildren: '../horse-food/horse-food.module#HorseFoodPageModule'
}
]
},
{
path: 'horse-food/:horseId',
children: [
{
path: '',
loadChildren: '../horse-food/horse-food.module#HorseFoodPageModule'
}
]
},
{
path: 'horse-health',
children: [
{
path: '',
loadChildren: '../horse-health/horse-health.module#HorseHealthPageModule'
}
]
},
{
path: 'horse-health/:horseId',
children: [
{
path: '',
loadChildren: '../horse-health/horse-health.module#HorseHealthPageModule'
}
]
},
{
path: '',
redirectTo: '/horse-detail/horse-size',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/horse-detail/horse-size',
pathMatch: 'full'
}
];
and in the first tab .ts:
this.horseId = this.route.snapshot.params.horseId;
error message:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'horse-detail/horse-size'
Error: Cannot match any routes. URL Segment: 'horse-detail/horse-size'
at ApplyRedirects.noMatchError (router.js:3387)
at CatchSubscriber.selector (router.js:3376)
at CatchSubscriber.error (catchError.js:29)
at MapSubscriber._error (Subscriber.js:75)
at MapSubscriber.error (Subscriber.js:55)
at MapSubscriber._error (Subscriber.js:75)
at MapSubscriber.error (Subscriber.js:55)
at MapSubscriber._error (Subscriber.js:75)
at MapSubscriber.error (Subscriber.js:55)
at ThrowIfEmptySubscriber._error (Subscriber.js:75)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
at invokeTask (zone-evergreen.js:1603)
defaultErrorLogger @ core.js:9110
handleError @ core.js:9162
next @ core.js:34915
schedulerFn @ core.js:31051
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:31013
(anonymous) @ core.js:34240
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:34127
onHandleError @ core.js:34237
handleError @ zone-evergreen.js:363
runGuarded @ zone-evergreen.js:137
api.microtaskDrainDone @ zone-evergreen.js:663
drainMicroTaskQueue @ zone-evergreen.js:566
invokeTask @ zone-evergreen.js:469
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
The second and third tab are recieving the id correctly via the activated Route. But not the first one.
am I missing something or is this a bug? ![:confused:]( ":confused:")
