Navigate to top level route in named router from nested components

  Kiến thức lập trình

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?

LEAVE A COMMENT