嵌套Angular2 RC5路由多个文件

Question

我试图理解我应该如何组织多个路由文件并让它们一起很好地协同工作.

我想要的路线如下:

/
/forms
/forms/:id
/forms/named-form (named-form2, named-form3, etc.)
/forms/named-form(2,3,etc)/admin
/forms/named-form(2,3,etc)/admin/(several options here)

我想要的文件组织:

/app.module
/app.routes
/app.component <--Router Outlet

/forms/forms.module
/forms/forms.routes
/forms/forms.component <--Router Outlet for displaying Form Creation, Details, Settings, etc.

/forms/named-form/named-form.module
/forms/named-form/named-form.routes
/forms/named-form/named-form.component <--Router Outlet for displaying Form or Admin section

/forms/named-form/admin/admin.module
/forms/named-form/admin/admin.routing
/forms/named-form/admin/admin.component <--Router Outlet for various admin pages    

我现在拥有的方式:

/forms.routing.ts

const formsRoutes: Routes = [
  {
    path: 'forms',
    component: FormsComponent,
    children: [
      { path: '', component: FormsListComponent },
      { path: ':id', component: FormsListComponent }
    ]
  }
];

export const formsRouting = RouterModule.forChild(formsRoutes);

/forms/named-form.routing.ts

const namedFormRoutes: Routes = [
  {
    path: 'forms/named-form',
    component: NamedFormComponent,
    children: [
      {
        path: '',
        component: NamedFormFormComponent,
      },
      {
        path: 'confirmation',
        component: NamedFormConfirmationComponent
      }
    ]
  }
];

/forms/named-form/admin.routes.ts

const namedFormAdminRoutes: Routes = [
  {
    path: 'forms/named-form/admin',
    component: NamedFormAdminComponent,
    children: [
      {
        path: '',
        component: ManageDataComponent,
      },
       {
         path: 'manage-data',
         component: ManageDataComponent
        },
       {
        path: 'settings',
        component: SettingsComponent
      },
      {
        path: 'import',
        component: ImportDataComponent
      }
    ]
  }
];

这大部分都有效,但我遇到了一些问题.我希望我没有必要指定我在嵌套路由中更深入的完整路径.例如,管理路径是,forms/named-form/admin但我希望它已经知道它是一个孩子named-form.这是导致我认为自己做错了什么的事情之一.

我还需要能够在我的named-form.component文件中做一些会影响admin.component但是named-form.component如果我导航到目前没有被触及的东西forms/named-form/admin.它最终使用主app.component路由器插座而不是named-form.component路由器插座.我可以admin在named-form.routes文件中包含一个路径,但后来我不知道如何设置admin子路由,而不必导入所有主要的admin子组件,这使得它不那么模块化.

我不确定是否有必要查看我的模块,但如果是这样我会将它们添加进去.

我怎么能做得更好？谢谢你的期待.

Answer 1

从我所看到的目前(RC5)没有简单的方法来设置具有嵌套模块的路由.我已经实现了Stack Overflow回答中描述的解决方案:

如何作为模块的子项路由到模块 - Angular 2 RC 5

它使用前RC5路由(导出Routes对象而不是RouterModule.forChild)和当前RC5 ngModule设置的混合.不幸的是,它会强制您在父路由配置中列出子路由器组件并导出子模块中的所有组件,这显然是不理想的.但至少你不必像你的例子中那样使用子路径配置中的完整路径路径.此设置也正确嵌套路由器插座,而不是如上所述恢复到根路由器插座.

我的配置的一些片段:

// parent route config
const routes: Routes = [
{
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
},
{
    path: '',
    component: BaseComponent,
    canActivate: [AuthGuard],
    children: [
        { path: 'home', component: HomeComponent },            
        {
            path: 'admin',
            children: [...adminRoutes]             
        }            
    ]        
}    
];


// child route config (for me, "/admin")
export const adminRoutes: Routes = [
{
    path: '',
    component: AdminComponent,
    children: [
        {
            path: '',
            redirectTo: 'client-list',
            pathMatch: 'full'
        },
        { path: 'client-list', component: AdminClientListComponent, canActivate: [AdminClientListGuard] },
        { path: 'list', component: AdminListComponent },
        { path: 'edit/:id', component: AdminEditComponent }
    ]
}
];