带有辅助路由的 RouterLink答案

【问题标题】：RouterLink with auxiliary routes带有辅助路由的 RouterLink
【发布时间】：2017-02-07 08:40:09
【问题描述】：

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

这是我的路线：

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

这里是路由器插座

    <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”时，第二个链接停止工作。当我在“/”路线上单击它时，它完美地适用于“/（details：summary）”

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

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

【问题讨论】：

你有 plunker 或任何现场演示吗？我使用插座的方式与您的第二个链接相同，它适用于所有页面。我没有为插座使用数组，但这应该没有区别：[{ outlets: { detail: 'summary'}}]

标签： angular angular2-routing

【解决方案1】：

由于路由abm和summary处于同一级别，正确的路由应该是/(abm//detail:summary)

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

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

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

【讨论】：