Question

所以我有一个带有2个独立部件的应用程序需要单独导航，并且认为Aux Routing是最佳选择。

以下是我的路线：

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>

编辑：

第二个链接仅在首次点击时有效。当我导航到＆＃34; / abm＆＃34;第二个链接停止工作。当我在＆＃34; /＆＃34;上点击它时路线它完美地适用于＆＃34; /（详情：摘要）＆＃34;

当我在＆＃34; / abm上悬停链接时（详情：摘要）＆＃34;路线显示＆＃34; / abm /（详情：摘要）（详情：摘要）＆＃34;

我想它必须是相对和绝对路线的一些问题，但我似乎无法找到它。

Answer 1

由于路线绝对和摘要处于同一级别，因此正确的路线应为/(abm//detail:summary)

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

要解决此问题，您可以按脚本进行路由：

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

带有辅助路由的RouterLink

1 个答案: