Angular 2命名出口：未捕获（承诺中）：错误：无法匹配任何路由。URL段：

在客户管理应用程序中，我尝试实现以下功能：

• 客户端列表（页面左侧）
• 客户端详细信息（页面右侧）仪表板/Client/id/
• 添加客户端（页面右侧）。仪表板/客户端/新建
• 编辑客户端（页面右侧）。仪表板/客户端/id/编辑

我只想根据用户单击的内容更改右侧的视图。

路由器配置

//已删除导入以缩短此时间
常量客户端路由：路由=[
{
路径：“”，
组件：客户端组件，
儿童：[
{
路径：“”，
组件：ClientListComponent，
儿童：[
{路径：'new'，
组件：客户端新组件
},
{路径：':id'，
组件：ClientDetailComponent，
解析：{client:ClientDetailResolver}，
儿童：[
{路径：'edit'，
出口：'第1节'，
组件：ClientEdit组件，
},
]
}
]
}
]
}
];
@NGD模块({
导入：[RouterModule.forChild（clientRoutes）]，
导出：[路由模块]，
提供者：[ClientDetailResolver]
})
导出类ClientRouting{}

客户端列表组件HTML

新客户
添加客户端
名称
电话
客户端ID
{{item.name}
{{item.phone}
{{item.id}

客户详细信息组件

onSelectEdit（）：void{
导航（[{outlets:{'section1'：['edit']}}}]，{relativeTo:this.route}）；

客户端详细信息组件HTML

编辑
//在此处显示所选客户端的所有客户端详细信息{name}{address}等

---

这是因为路径

edit

不存在

模块中的路径是通过连接树中的所有路径（父级+子级+子级…）来计算的，这意味着您最终得到的是相对路径

:id/edit

，或绝对路径

/dashboard/client/:id/edit

请尝试使用以下代码：

//注意。必须在代码中定义/访问'id'属性。
//相对路径语法
//注意：必须将'ActivatedRoute'注入'route'属性。
导航（[{outlets:{'section1'：[id，'edit']}，{relativeTo:this.route}]）；
//绝对路径语法
导航（[{outlets:{'section1'：['dashboard'，'client'，id'，'edit']}]）；

这是一个angular2错误：

您可以尝试做的是更改

路径：“”，
component:ClientListComponent，

这给了我相同的结果。错误：无法匹配任何路由。URL段：“id/edit”，id是客户端的相应id。Oops。我忘记了

router.navigate（）

默认情况下不假设路径是相对的。我用正确的语法更新了我的答案。我从未尝试将

outlets

与

relativeTo

参数组合。请在您有机会尝试后确认相对语法是否起作用。我仍然不太幸运，但现在我使用了它，它成功了内容：

this.router.navigate（[{outlets:{'section1'：['edit']}}}]，{relativeTo:this.route}）；

但是，在我点击“编辑”之后表单将在客户端的详细信息之上呈现。我只想删除详细信息视图并打开一个包含详细信息的表单，以便用户可以编辑。路由器配置有什么问题，或者我如何才能最好地处理此pls？请参阅我问题的编辑版本以获取参考。