angular - 针对多个路由器 socket (主要+辅助)时的 routerLink 语法

Question

有谁知道为什么链接 #1 和 #2 有效但链接 #3 无效？

<a [routerLink]="['/contact']">Contact Solo</a> |
<a [routerLink]="[{ outlets: { aux: 'aside' }}]">Aux Solo</a> |
<a [routerLink]="['/contact', { outlets: { aux: 'aside' }}]">Contact + Aux</a>

<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

换句话说:我可以单独激活主路由(链接#1)，我可以单独激活辅助路由(链接#2)，但是我不能同时激活主路由和辅助路由(链接#3)。链接 #3 仅激活主要路由，但不会在控制台中触发任何错误。

有趣的是，点击 link #1 然后点击 link #2 生成我想要的(主路由和辅助激活)，路径为 contact(aux:aside) 而 link #3 的路径为 contact/(aux:aside)(注意 /)。

Plunkr:https://plnkr.co/edit/WqTRjux7muHjalIL3rsL?p=preview

路由声明:

const appRoutes: Routes = [
  {
    path: 'contact',
    component: ContactComponent,
  },
  {
    path: 'aside',
    component: PopupComponent,
    outlet: 'aux'
  }
];

我尝试了多种组合和语法都无济于事。

Answer 1

试试下面，

 <a [routerLink]="[{ outlets: { primary: 'contact', aux: 'aside' }}]">Contact + Aux</a>

已更新 Plunker !!

希望这对您有所帮助!