angular - 带有辅助路由的 RouterLink

Question

所以我有一个包含 2 个独立部分的应用程序，需要单独导航，我认为 Aux Routing 是可行的方法。

这是我的路线:

export const ROUTES: Routes = [
  { path: '',
    component: AbmBlock
  },
  { path: 'abm',
    component: AbmBlock
  },
  { path: 'summary',
    component: SummaryBlock,
    outlet: 'detail'
  },
  { path: '**',    component: AbmBlock },
];

这里是路由器 socket

    <div class="app-content">
    <div class="main-container">
        <div  class="main-panel">
            <router-outlet></router-outlet>
        </div>
    </div>
    <div class="detail-container">
        <div  class="detail-panel">
             <router-outlet name="detail"></router-outlet>
        </div>
    </div>
</div>

这是我尝试配置 RouterLink

<a [routerLink]= "['/abm']" > 1</a>
<a [routerLink]= "[{ outlets: { 'detail': ['summary']}}]" > 2</a>

编辑:

第二个链接只有在第一次点击时才有效。当我导航到“/abm”时，第二个链接停止工作。当我在“/”路线上单击它时，它完美地适用于“/(详细信息:摘要)”

当我将链接悬停在“/abm(details:summary)”路线上时，它显示“/abm/(details:summary)(details:summary)”

我想这一定是相对和绝对路由的问题，但我似乎找不到它。

Answer 1

因为route abm和summary在同一级别，所以正确的route应该是/(abm//detail:summary)

当您单击 <a [routerLink]= "[{ outlets: { 'detail': ['summary']}}]" > 2</a> 时在/abm 下，它正在寻找/abm 下的 child 组件摘要，而摘要组件是 sibling 组件。

要解决这个问题你可以通过脚本路由:

this.router.navigate([{outlets: { 'detail': ['summary']}} ], {relativeTo: this.route.parent});