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

问题描述

我试图了解如何组织多个路由文件，并使它们一起正常播放.

我想要的路线如下:

/
/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的操作，但是如果我导航到forms/named-form/admin，则当前不会触摸named-form.component.最终使用主app.component路由器出口而不是named-form.component路由器出口. 我可以在named-form.routes文件中包含admin的路径，但是然后我不知道如何设置admin子级路由，而不必同时导入所有主要的admin子级主要组件，这使得它的模块化程度降低了.

我不确定是否需要查看我的模块，但如果需要，我将其添加到其中.

我该如何做得更好?感谢您的关注.

解决方案

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

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)

My desired file organization:

/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    

The way I have things now:

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

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.

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.

解决方案

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:

How to route to a Module as a child of a Module - Angular 2 RC 5

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.

Some snippets of my configuration:

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