定位多个路由器插座时的 routerLink 语法(主要 + 辅助) [英] routerLink syntax when targeting multiple router-outlets (primary + aux)

问题描述

有谁知道为什么链接 #1 和 #2 可以工作而链接 #3 不行?

Does anyone know why link #1 and #2 work but link #3 doesn't?

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

In other words: I can activate the primary route individually (link #1), I can activate the auxiliary route individually (link #2), but I can't activate the primary route AND the auxiliary route simultaneously (link #3). Link #3 only activates the primary route but triggers no error in the console.

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

Interestingly, clicking link #1 then link #2 produces what I want (primary route AND auxiliary activated) with a path of contact(aux:aside) whereas link #3 has a path of contact/(aux:aside) (notice the /).

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

路线声明:

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

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

I've tried multiple combinations and syntaxes to no avail.

推荐答案

试试下面，

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

更新了Plunker！！

希望这有帮助！！

这篇关于定位多个路由器插座时的 routerLink 语法(主要 + 辅助)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！