删除 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 - 我看到 none (✓)
如果我然后单击 Only Dog - 我只看到一只狗 (✓)
如果我然后单击 Only Bird - 我看到狗和鸟（✕ - 为什么？我只想看到一只鸟）如果我点击 Dog & Bird - 我看到一个错误 (✕ - Cannot match any routes. URL Segment: 'dog' 。我期待看到狗和鸟）

这是为什么？我该如何修复我的代码，使其显示准确的 link 描述？

PLNKR

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

Answer 1

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

这是路由。当您需要同时使用两个插座进行导航时，我通过阅读路由测试了解到的内容 - 仅使用插座。对于主插座，只需使用 '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>

删除 angular 4 中的 Aux 路由？

Remove Aux routes in angular 4 "?

javascript

angular2-routing

angular