我的布局像这样:

<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].我希望该路由链接触发detailsrouter-outlet 内的my-details路由.

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

但点击它不会 Select 路由.它说找不到(我有一条路由可以领取所有不匹配的路由).

当与主路由处于同一级别时,主路由出口中呈现的组件似乎无法触发指定路由中的路由. 我try 过将[relativeTo]="route.parent"放入routerLink中,但事情是一样的.

我错过了什么?

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

推荐答案

相信问题在于您没有提供[routerLink]数组中路径的第一个值,默认情况下它将使用当前路径.因此它将<a>元素渲染为:

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

由于您的"my-Details"路由不是"some-components"的子路由,因此这将无法匹配任何路由.

您应该在数组的第一个值中提供空字符串或"/"[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>

Demo @ StackBlitz

Angular相关问答推荐

如何在Angular 17中使用Angular—calendum?

Primeng 12Angular 12自定义库:错误符号字段集声明于...在编译保存后未从Primeng/fieldset中导出

仅在展示时使用垫式步进器

Angular 16独立依赖注入问题

如何使用独立组件在ANGLE(16+)中实现嵌套布线

Angular 17+独立配置中main.ts bootstrap 调用的最佳实践

当快速拖动光标时会丢失元素 - Angular

模块内的命名路由出口 - 路径匹配但内容未加载

角 12 固态继电器 |页眉页脚在加载程序到来之前显示

Angular 等待对话框未显示

将 injectiontoken 用于 Angular 中的模块特定设置

Summernote 文本区域的输入字段文本验证失败

Angular Material 模态对话框周围的空白

Angular2 - 如何开始以及使用哪个 IDE

在 RxJS Observable 中 flatten数组的最佳方法

Angular 应用程序中的语法错误:Unexpected token <

Angular 2中不同页面的多种布局

没有 ChildrenOutletContexts 的提供者 (injectionError)

包 '@angular/cli' 不是依赖项

Angular2:子组件访问父类变量/函数