目前正在尝试了解Angular 2路由,并且我遇到了一个我无法解决的问题,感觉它是某种语法或配置,我只是缺少.
我希望在一个页面上有两个路由器插座,并且能够在页面上显示两个单独的部分,用户可以单独导航.
我尝试按照这里的代码 – http://onehungrymind.com/named-router-outlets-in-angular-2/
但是,当我这样做时,我收到一个错误,说它无法找到子路由所在的路由.
这是代码：
路线
{
path: 'full',component: FullComponent,children: [
{
path: 'list',component: ListComponent,outlet: 'list'
}
]
}
在完整组件中：
<div divOne>
<router-outlet name="list"></router-outlet>
</div>
<div divTwo>
<router-outlet name="detail"></router-outlet>
</div>
我这样导航：
let navigationExtras: any = {
queryParams: { reference: 21 },outlets: {'list': ['list']}
};
this.router.navigate( ['full'],navigationExtras);
这给我以下错误信息：
core.umd.js:5995 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: ‘full’
如果我从子路径中取出插座,我不会收到此错误消息.
任何人都可以指出我哪里错了吗？
解决方法
该组件只需要一个未命名的路由器插座,并可以有其他命名插座
<router-outlet></router-outlet> <router-outlet name="full"></router-outlet> this.router.navigate( ['full'],navigationExtras);
导航([{outlets：{route3：’productPage’}}]);
navigate() {
let navigationExtras: any = {
queryParams: { reference: 21 },outlets: {full: 'full']}
};
this.router.navigate([navigationExtras]);
}
