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 1}}。它最终使用主app.component路由器插座而不是named-form.component路由器插座。我可以在admin文件中包含named-form.routes的路径，但后来我不知道如何设置管理子路由，而不必导入所有主要的admin子组件它不那么模块化了。

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

我怎样才能更好地做到这一点？谢谢你的期待。

Answer 1

从我所见，目前（RC5）没有简单的方法来设置嵌套模块的路由。我已经实现了此Stack Overflow答案中描述的解决方案：

How to route to a Module as a child of a Module - 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 }
    ]
}
];

Answer 2

我在上面提到过这个问题 How to route to a Module as a child of a Module - Angular 2 RC 5文章。这是我的答案的副本：

使用ngModules和RC5时，父模块的路由配置不需要了解子模块路由的任何信息。您只需在此处定义父模块的路由。此外，您必须将子模块导入父模块。在子模块中，您必须以这种方式定义路线：

<property action="remove" name="TRANSPORT_HEADERS" scope="axis2"/>

这将让你有一个像/ someParent / someChild / comp1的网址 - 组件显示在相应的路由器插座中。请注意：您必须为空路径去除组件。否则你无法导航给你的孩子。

嵌套Angular2 RC5路由多个文件

2 个答案: