我正在将正在处理的应用程序升级到最新的Angular 2候选版本.作为这项工作的一部分,我试图使用NgModule规范并将我的应用程序的所有部分迁移到模块.在大多数情况下,除了路由问题之外,这已经非常顺利.
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
我的应用程序是作为模块的组合构建的,其中几个模块粘合在一起作为父模块的子项.例如,我有一个管理模块,它包含通知模块,用户模块和电话模块(例如).这些模块的路径应该像......
/admin/notifications/my-notifications
/admin/users/new-user
/admin/telephony/whatever
在路由器的早期版本中,使用"children"很容易实现
export const AdminRoutes: RouterConfig = [
{
path: "Admin",
component: AdminComponent,
Children: [
...UserRoutes,
...TelephonyRoutes,
...NotificationRoutes
]
}
]
在另一个文件中,作为子模块的一部分,我也定义了各个模块路由
export const UserRoutes: RouterConfig = [
{
path: "users",
component: userComponent,
children: [
{path: "new-user", component: newUserComponent}
]
}
]
这一切都很有效.在升级到模块的过程中,我将所有内容都移动到了各自的路由文件中,所以现在这两个看起来更像是这样
const AdminRoutes: Routes = [
{path: "admin", component: AdminComponent}
]
export const adminRouting = RouterModule.forChild(AdminRoutes)
和 …
我试图理解我应该如何组织多个路由文件并让它们一起很好地协同工作.
我想要的路线如下:
/
/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 }
]
}
]; …我正在尝试"插入"包含路由配置(从中导入RouterModule.forChild())的子ngModule(功能模块)到父ngModule中.
使用延迟加载时,使用loadChildren父模块路由配置中的密钥指定"插入"子模块的位置.
例如:
export const parentModuleRouteConfig = [{
path: 'myfeaturemodule',
loadChildren: '/app/child.module'
}];
实际上,我不想使用延迟加载.
如何告诉路由器"插入"(或使用)给定路径的子模块中指定的路由配置？