我看到过一个例子,其中有两个<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'"。我期望能看到狗和鸟)
为什么会这样呢?如何修复我的代码以便显示精确的链接描述?
相关或不相关 - 我认为这与清除辅助路线有关(通过routerLink
传递null没有帮助。- 参见PLNKR2)。