javascript - 删除 Angular 为 4 的 Aux 路由“？

Question

我见过一个例子，我有两个 <router-outlet> ，其中只有一个有 name属性 - 所以我做了一个小测试:

我有这个路由器映射:

export  const routing   = [
    {path:'', pathMatch:'full', component:EmptyComponent},
    {path:'dog',   component:DogComponent},
    {path:'bird',   outlet:'under', component:BirdComponent} 
];

我也有这个 routerLinks :

<li><a [routerLink]="['']">Clear</a></li>
<li><a [routerLink]="['dog']">Only Dog</a></li>
<li><a [routerLink]="['/', {outlets: {under: ['bird','' }}]">Only Bird</a></li>
<li><a [routerLink]="['dog',{outlets: {under: ['bird','' }}]">Dog & Bird</a></li>

<router-outlet></router-outlet>
<hr>
<router-outlet name='under'></router-outlet>

问题:

如果我点击 Clear - 我没看到 (✓)
如果我然后单击 Only Dog - 我只看到一只狗 (✓)
如果我然后单击 Only Bird - 我看到了狗和鸟(✕ - 为什么？我只想看到一只鸟)如果我点击 Dog & Bird - 我看到一个错误(✕ - 无法匹配任何路由。URL 段:“dog”。我希望同时看到 Dog 和 Bird)

这是为什么呢？以及如何修复我的代码以使其显示准确的链接描述？

PLNKR

相关与否 - 我认为它必须做一些清除 AUX 路由的事情(通过 routerLink 传递 null 没有帮助。 - 参见 PLNKR2)

Answer 1

我修复了 plunker。 https://plnkr.co/edit/2fvbGnepD5tGaeYb8DKK?p=preview

这是路由。当您需要同时使用两个 socket 进行导航时，我通过阅读路由测试了解到的内容 - 仅使用 socket 。对于主 socket ，只需使用“primary”。

  <li><a [routerLink]="['']">None</a></li>
  <li><a [routerLink]="[{outlets: {primary: 'dog', under: null}}]">Only Dog </a></li>
  <li><a [routerLink]="[{outlets: {primary: null, under: ['bird']}}]">Only Bird</a></li>
  <li><a [routerLink]="[{outlets: {primary: ['dog'], under: ['bird']}}]">Dog & Bird</a></li>