I have a layout like:
<div>
<router-outlet />
<div class="details">
<router-outlet name="details"></router-outlet>
</div>
</div>
in routes, at top level, I have:
routes = [
{
path: 'some-component',
component: SomeComponent,
},
{
path: 'my-details',
component: DetailsComponent,
outlet: 'details'
}
]
Now, when I navigate to “some-component” route I have a [routerLink]
in its template. I want that router link to trigger my-details
route within the details
router outlet.
I have:
[routerLink]="[{outlets:{details:['my-details']}}]"
but clicking on it doesn’t pick up the route. It says not found (i have a route to pickup all routes not matched).
Seems like components rendered within primary router outlet cannot trigger route in named router when its at the same level as primary router.
I’ve tried putting [relativeTo]="route.parent"
into routerLink
but same thing.
What am I missing?