针对多个路由器插座时的routerLink语法(primary + aux)

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仅激活主路由,但在控制台中不会触发错误.

有趣的是,单击链接#1然后链接#2产生我想要的(主路由和辅助激活)与路径,contact(aux:aside)而链路#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 !!

希望这可以帮助!!