带有路由的Angular2多组件UI答案

【问题标题】：Angular2 multi component UI with routing带有路由的Angular2多组件UI
【发布时间】：2023-03-28 09:11:01
【问题描述】：

当需要父/子多组件时，对于带有路由的 Angular2 (beta3) 应用程序来说，什么是好的（最佳）结构？

对于单个表，我有以下结构：

因此，在 AppComponent 中，我有到各个 TableComponents 的非终端路由，它们有自己的路由器来显示列表或详细信息。我可以使用 router.navigate() 并且一切正常。

但现在我需要在一页上显示父/子表（带有自己的详细信息表单），如下所示：

我已经拥有两个单独的表的组件（只需要添加一些过滤代码来显示正确的子记录，但这不会有问题）。我开始使用 MultiComponent 来保存两个 TableComponent。现在我被卡住了......

我不能有两个路由器插座，例如：

<router-outlet></router-outlet> (for the parent component)
<router-outlet></router-outlet> (for the child component)

确实看过“aux”，但我认为这不适合我的用例。

我可以这样做：

<router-outlet></router-outlet> //(with @RouteConfig for parent TableComponent)
<ListComponent></ListComponent> //(directive for child ListComponent)

这几乎可以工作。它显示父/子列表，并且父项按预期工作。但是孩子没有路由器，所以在触发更新/详细信息表单时，没有路由器。我可以通过（一个）路由器出口显示子列表的更新（详细信息），但是在执行 router.navigate() （例如导航回列表）时，我得到一个“...没有路由配置。 "错误。

那么，在 Angular2 中重用现有表/详细信息组件（拥有自己的子路由器）的正确方法是什么？

【问题讨论】：

标签： angular

【解决方案1】：

经过进一步的实验，我得到了令人满意的结果。该结构看起来类似于单表组件设置。关键在于@RouteConfig。

因此，CombiListComponent 使用指令组合了两个表格组件。然而，关键在于 CombiComponent 的 @RouteConfig。这里两个表使用了不同的路由：

  {path:'/',    name: 'CombiList',   component: CombiListComponent, useAsDefault: true},
  {path:'/Table1/',    name: 'Table1List',   component: CombiListComponent},
  {path:'/Table2/',    name: 'Table2List',   component: CombiListComponent},
  {path:'/Table1/:id', name: 'Table1Detail', component: Table1DetailComponent},
  {path:'/Table1/new', name: 'NewTable1', component: Table1DetailComponent},
  {path:'/Table2/:id', name: 'Table2Detail', component: Table2DetailComponent},
  {path:'/Table2/new', name: 'NewTable2', component: Table2DetailComponent}

【讨论】：