嵌套 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 的操作，但如果我导航到forms/named-form/admin，named-form.component 目前不会被触及。它最终使用主要的app.component 路由器插座而不是named-form.component 路由器插座。 我可以在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 时，您的父模块的路由配置不需要了解子模块路由的任何信息。您只需在此处定义父模块的路由。 此外，您必须将子模块导入父模块。 在子模块中，您必须以这种方式定义您的路线：

export const childRoutes: Routes = [
  {
    path: 'someChild',
      component: SomeChildComponent,
      children: [
        { path: '', component: SomeChildSubComponent1 },
        { path: 'comp1', component: SomeChildSubComponent1 },
        { path: 'comp2', component: SomeChildSubComponent2 }
      ]
  }
];

这会让你有一个像 /someParent/someChild/comp1 这样的 url - 并且组件显示在它们相应的路由器插座中。 请注意：您必须为空路径删除组件。否则，您将无法导航到您的孩子。