针对多个路由器出口(primary + aux)时的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>

更新了柱塞！

希望这会有所帮助！

这篇关于针对多个路由器出口(primary + aux)时的routerLink语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！