嵌套Angular2 RC5路由多个文件

发布时间：2020-12-17 07:57:28 所属栏目：安全来源：网络整理

导读：我试图理解我应该如何组织多个路由文件并让它们完美地一起玩. 我想要的路线看起来像这样： //forms/forms/:id/forms/named-form (named-form2,named-form3,etc.)/forms/named-form(2,3,etc)/admin/forms/named-form(2,etc)/admin/(several options here) 我

我试图理解我应该如何组织多个路由文件并让它们完美地一起玩.

我想要的路线看起来像这样：

/
/forms
/forms/:id
/forms/named-form (named-form2,named-form3,etc.)
/forms/named-form(2,3,etc)/admin
/forms/named-form(2,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,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 router-outlet而不是named-form.component router-outlet.
我可以在named-form.routes文件中包含admin的路径,但后来我不知道如何设置admin子路由,而不必导入所有主要的admin子组件,这使得模块化程度降低.

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

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

从我所看到的,目前(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 }
    ]
}
];

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!