我刚刚开始学习 Angular2,我想构建一个非常常见的“列表详细信息”样式页面,类似于:http://xgrommx.github.io/rx-book/index.html 。当您单击左侧栏中的某个项目时,它会启动导航到中心详细信息 View ,而无需拆除左侧栏。达到这种效果的最佳方法是什么?
当我启动 home 组件时,列表组件(child1)将立即加载,并且它将调用外部 API 来获取项目列表的名称(仅名称)。当单击左侧的项目名称时,它将创建一个新的详细信息组件。详细信息组件在其 ngOnInit 方法中获取项目详细信息。我尝试使用辅助路由将两个子组件嵌套在同一页面上,但它似乎不起作用。我的家乡路线如下:
export const HomeRoutes: RouterConfig = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent,
children: [
{
path: '',
component: ListComponent
},
{
path: ':item',
component: DetailComponent
outlet: 'detail'
}
]
}
];
在我的 home.component.ts
中,我只有这个:
<h2>Home</h2>
<router-outlet></router-outlet>
<router-outlet name="detail"></router-outlet>
我导航到详细 View 的方式是在列表组件中调用navigate(),如下所示:
onSelect(item : string) {
this.router.navigate(['/detail', item]);
}
但是每次我单击任何项目时,详细信息 View 都不会显示,并且显示如下错误:
Error: Uncaught (in promise): Error: Cannot match any routes: 'home/item'
.
我使用辅助路线的方式正确吗?有没有更好的方法来实现此功能?
最佳答案
当前的路由器版本在使用 routerLink
和 navigate
方法导航到辅助 socket 时存在一些问题。您应该构建完整的 URL 并使用 navigateByUrl
。
this.router.navigateByUrl('/home/(list//detail:detail)
笨蛋与 example 。单击详细信息按钮,然后单击管理。管理员在管理导出中路由。全屏打开以查看 URL 构成。
URL 具有以下语义
- 子路径由/分隔
- 如果路径有兄弟路径,那么应该用括号将其括起来
- sibling 之间用//分隔
socket 和路径由 : 分隔
父/子/(gchild1//outletname:gchild2)
另一个这样question
关于html - Angular2 从一个组件导航到同级组件而不拆除第一个组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38363669/