带有路由的Angular2多组件UI

Question

当需要父/子多组件时，具有路由的Angular2（beta3）应用程序的良好（最佳）结构是什么？

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

所以在AppComponent中我有到各个TableComponents的非终端路由，它们有自己的路由器来显示List或Detail。我可以使用router.navigate（），一切都很棒。

但是现在我需要在一个页面上显示父/子表（使用他们自己的详细信息表单），如下所示：

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

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

<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重用现有的表/详细信息组件（拥有自己的子路由器）的正确方法是什么？

Answer 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}