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 - 我看到一个错误（✕ - 无法匹配任何路线。网址细分：'狗'。我期待看到狗和鸟一样）

为什么？我如何修复我的代码，以便它显示确切的链接描述？

PLNKR

相关与否 - 我认为必须通过清除AUX路由（通过routerLink传递null）没有帮助。 - 请参阅PLNKR2）

Answer 1

我修好了那个弹药。 https://plnkr.co/edit/2fvbGnepD5tGaeYb8DKK?p=preview

这是路由。通过阅读路由测试时我理解的是当您需要同时使用两个网点导航时 - 仅使用网点。主要出口只需使用'主要'。

  <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>

删除4英寸角的Aux路线？

1 个答案: