嵌套 Angular2 RC5 路由多个文件 [英] Nesting Angular2 RC5 Routes Multiple Files

问题描述

我正在尝试了解我应该如何组织多个路由文件并使它们完美地协同工作.

I'm trying to understand how I'm supposed to organize multiple routing files and make them all play nicely together.

我想要的路线如下所示:

My desired routes look like this:

/
/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

/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

/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

/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 的子级.这是让我认为我做错了什么的事情之一.

This mostly works but there are a few problems I have with it. I wish I didn't have to specify the full paths the deeper I go in the nested routes. For instance the admin path is forms/named-form/admin but I'd like it to already know it's a child of named-form. This is one of the things that leads me to think I'm doing something wrong.

我还需要能够在我的 named-form.component 文件中做一些会影响 admin.component 但影响 named-form 的事情.如果我导航到 forms/named-form/admin，当前不会触及组件.它最终使用主要的 app.component 路由器出口而不是 named-form.component 路由器出口.我可以在 named-form.routes 文件中包含 admin 的路径，但是我不知道如何设置管理子路由而不必导入所有主要的管理子组件也减少了模块化.

I also need to be able to do things in my named-form.component file that will effect the admin.component but the named-form.component doesn't currently get touched if I navigate to forms/named-form/admin. It ends up using the primary app.component router-outlet instead of the named-form.component router-outlet. I can include a path for admin inside the named-form.routes file but then I don't know how to setup the admin children routes without also having to import all the main admin child components as well which makes it less modular.

我不确定是否需要查看我的模块，但如果需要，我会将它们添加进来.

I'm not sure if seeing my modules is necessary, but if so I'll add them in.

我怎样才能做得更好?感谢您的关注.

How can I do this better? Thanks for looking.

推荐答案

据我所知，目前(RC5)没有简单的方法来设置带有嵌套模块的路由.我已经实现了这个 Stack Overflow 答案中描述的解决方案:

From what I've seen there is currently(RC5) no simple way to setup routes with nested modules. I've implemented a solution described in this Stack Overflow answer:

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

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

It uses a hybrid of the pre-RC5 routing (exporting the Routes object instead of RouterModule.forChild) and the current RC5 ngModule setup. Unfortunately it forces you to list the child router component in your parent route config and export ALL components within the child module which obviously is not ideal. But at least you do not have to use the full route path in your child route configs as you have in your example. Also this setup is properly nesting the router-outlets and not reverting to the root router-outlet as you mentioned above.

我的一些配置片段:

// 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 }
    ]
}
];

这篇关于嵌套 Angular2 RC5 路由多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！