带有路由的Angular2多组件UI-Java 学习之路

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

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

single table structure

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

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

Parent/Child UI

我已经有了两个单独表的组件（只需要添加一些过滤代码来显示正确的子记录，但这不是问题） . 我开始使用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重用现有的表/详细信息组件（拥有自己的子路由器）的正确方法是什么？

1 回答

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

Combi structure

因此，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}

回复于 2024-05-02T05:23:29+08:00

带有路由的Angular2多组件UI

1 回答

相关问题