[英]Angular 2 routes children with outlets
Currently trying to learn about Angular 2 routing and I've come across an issue that I cannot resolve, it feels like it is some sort of syntax or config that I am simply missing. 目前正在尝试了解Angular 2路由,并且我遇到了一个我无法解决的问题,感觉它是某种语法或配置,我只是缺少。
I want to have two router outlets on the one page and be able to show two separate sections on the page that a user can individually navigate. 我希望在一个页面上有两个路由器插座,并且能够在页面上显示两个单独的部分,用户可以单独导航。
I tried following the code from here - http://onehungrymind.com/named-router-outlets-in-angular-2/ 我试着按照这里的代码 - http://onehungrymind.com/named-router-outlets-in-angular-2/
However when I do this I get an error saying it cannot find the route that the child routes are on. 但是,当我这样做时,我收到一个错误,说它无法找到子路由所在的路由。
Here's the code: 这是代码:
Routes 路线
{
path: 'full',
component: FullComponent,
children: [
{
path: 'list',
component: ListComponent,
outlet: 'list'
}
]
}
In the full component: 在完整组件中:
<div divOne>
<router-outlet name="list"></router-outlet>
</div>
<div divTwo>
<router-outlet name="detail"></router-outlet>
</div>
And I navigate like this: 我这样导航:
let navigationExtras: any = {
queryParams: { reference: 21 },
outlets: {'list': ['list']}
};
this.router.navigate( ['full'], navigationExtras);
This gives me the following error message: 这给我以下错误信息:
core.umd.js:5995 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'full' core.umd.js:5995 EXCEPTION:未捕获(承诺):错误:无法匹配任何路线:'full'
If I take the outlet out of the child route I dont get this error message. 如果我从子路径中取出插座,我不会收到此错误消息。
Can anyone point out where I am going wrong? 任何人都可以指出我哪里错了吗?
The component needs exactly one unnamed router-outlet and can have additional named outlets 该组件只需要一个未命名的路由器插座,并可以有其他命名插座
<router-outlet></router-outlet>
<router-outlet name="full"></router-outlet>
this.router.navigate( ['full'], navigationExtras);
navigate([{outlets: {route3: 'productPage'}}]); 导航([{outlets:{route3:'productPage'}}]);
navigate() {
let navigationExtras: any = {
queryParams: { reference: 21 },
outlets: {full: 'full']}
};
this.router.navigate([navigationExtras]);
}
router.navigate
方法的第一个参数应该是['/full']
而不是['full']
。
this.router.navigate(['/full'], navigationExtras);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.