从嵌套组件导航到命名路由器中的顶级路由

Question

我有这样的布局：

<div>
  <router-outlet />
  
  <div class="details">
    <router-outlet name="details"></router-outlet>
  </div>

</div>

在路线中，在顶层，我有：

routes = [
  {
    path: 'some-component',
    component: SomeComponent,
  },
  {
    path: 'my-details',
    component: DetailsComponent,
    outlet: 'details'
  }
]

现在，当我导航到“某些组件”路线时，我的模板中有一个

[routerLink]

。我希望该路由器链接能够触发

details

路由器插座内的“我的详细信息”路由。

我有：

[routerLink]="[{outlets:{details:['my-details']}}]"

但是点击它并不会拾取路线。它说找不到（我有一条路线可以拾取所有不匹配的路线）。

当主路由器出口内渲染的组件与主路由器处于同一级别时，似乎无法触发指定路由器中的路由。 我尝试将

[relativeTo]="route.parent"

放入

routerLink

但仍然不起作用。

我错过了什么？

PS。 如果我将命名路由器放入 SomeComponent 并使命名路由成为主路由的子路由，那么它就可以工作。但这不是我想要的。

Answer 1

相信问题是您没有提供

[routerLink]

数组中路径的第一个值，默认情况下它将使用当前路由。因此它将

<a>

元素渲染为：

<a href="<Domain URL>/some-component/some-component(details:my-details)></a>

由于您的“我的详细信息”路由不是“某些组件”的子路由，因此这将无法匹配任何路由。

您应该在

[routerLink]

的数组的第一个值中提供一个空字符串或“/”。

<a [routerLink]="['', {outlets:{details:['my-details']}}]">Details</a>

这会将

<a>

元素渲染为：

<a href="<Domain URL>/some-component(details:my-details)></a>

我相信与

[relativeTo]

也同样有效：

<a [routerLink]="[{outlets:{details:['my-details']}}]" 
  [relativeTo]="route.parent">Details</a>

演示@StackBlitz