如何作为模块的子项路由到模块 - Angular 2 RC 5

Question

我正在将正在处理的应用程序升级到最新的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)

和

const UserRoutes: Routes = [
       path: "users",
       component: userComponent,
       children: [
           {path: "new-user", component: newUserComponent}
       ]
] 

export const userRouting = RouterModule.forChild(UserRoutes)

有了所有这些,我有一个用户导入userRouting的UsersModule,然后是一个导入adminRoutes和UsersModule的AdminModule.我的想法是,由于UsersModule是AdminModule的子代,因此路由将按照以前的方式工作.不幸的是,它并非如此,我最终得到的用户路线就是

/users/new-user 

代替

/admin/users/new-user

此外,因此,新用户组件未加载到我的管理组件的路由器插座中,这会抛弃我的应用程序的样式和导航.

我不能为我的生活提出如何引用我的UserModule的路线作为我的AdminModule的孩子.我已经尝试过这种方式,并且在两个模块中获得有关路由的错误.显然,由于这是新发布的,其中一些案例的文档有点受限.

任何人都可以提供任何帮助将不胜感激!

Answer 1

好吧,在周末的大部分时间里摆弄这个后,我得到它在我的结束.最终对我有用的是做以下事情:

• Routes为要路由的每个模块导出全部.不要导入RouterModule.forChild()子模块中的任何一个.
• 导出子项模块定义中子路径定义可见的每个组件.
• import像往常一样导入(意味着Typescript 关键字)所有子路由,并使用...运算符将它们合并到正确的路径下.我无法使用定义路径的子模块,但在父模块上工作正常(并且与延迟加载兼容).

就我而言,我在层次结构中有三个级别,如下所示:

• 根(/)
  • 编辑(editor/:projectId)
    • 查询(query/:queryId)
    • 页面(page/:pageId)
  • 正面(about)

以下定义适用于我的/editor/:projectId/query/:queryId路径:

// app.routes.ts
import {editorRoutes}                   from './editor/editor.routes'

// Relevant excerpt how to load those routes, notice that the "editor/:projectId"
// part is defined on the parent
{
    path: '',
    children: [
        {
            path: 'editor/:projectId',
            children: [...editorRoutes]
            //loadChildren: '/app/editor/editor.module'
        },
    ]
}

编辑器路由如下所示:

// app/editor/editor.routes.ts
import {queryEditorRoutes}              from './query/query-editor.routes'
import {pageEditorRoutes}               from './page/page-editor.routes'

{
    path: "", // Path is defined in parent
    component : EditorComponent,
    children : [
        {
            path: 'query',
            children: [...queryEditorRoutes]
            //loadChildren: '/app/editor/query/query-editor.module'
        },
        {
            path: 'page',
            children: [...pageEditorRoutes]
            //loadChildren: '/app/editor/page/page-editor.module'
        }
    ]
}

QueryEditor的最后一部分如下所示:

// app/editor/query/query-editor.routes.ts
{
    path: "",
    component : QueryEditorHostComponent,
    children : [
        { path: 'create', component : QueryCreateComponent },
        { path: ':queryId', component : QueryEditorComponent }
    ]
}

但是,为了使这项工作,一般Editor需要导入和导出导出和导出QueryEditor的QueryEditor需要QueryCreateComponent,QueryEditorComponent因为导入可以看到这些.如果不这样做,就会给你带来错误Component XYZ is defined in multiple modules.

请注意,延迟加载也适用于此设置,在这种情况下,当然不应导入子路由.

Answer 2

我有同样的问题.

这里的答案非常好,使用loadChildren:

          {
             path: 'mypath',
             loadChildren : () => myModule
          }

https://github.com/angular/angular/issues/10958

Answer 3

我认为 2.0.0 rc5 现在不感兴趣。不过 Angular 4 已经实现了，可能还早。

@NgModule({
    imports: [
        RouterModule.forRoot([
                {path: "", redirectTo: "test-sample", pathMatch: "full"},
                {
                    path: "test-sample",
                    loadChildren: () => TestSampleModule
                }
        ])
    ],
    exports: [RouterModule],
    declarations: [] 
}) 
export class AppRoutingModule{}

@NgModule({
    imports: [
        RouterModule.forChild([{
                    path: "",
                    component: TestSampleComponent,
                    children: [
                        {path: "", redirectTo: "home", pathMatch: "full"},
                        {
                            path: "home",
                            loadChildren: () => HomeModule
                        },
                        {
                            path: "about",
                            loadChildren: () => AboutModule
                        }
                    ]
                }
        ])
    ],
    exports: [RouterModule],
    declarations: []
})
export class TestSampleRoutingModule {}

@NgModule({
    imports: [RouterModule.forChild([{
                    path: "",
                    component: AboutComponent
                }
    ])],
    exports: [RouterModule]
})
export class AboutRoutingModule {}

考虑到loadChildren: () => {...}. 这不是延迟加载。

有关详细信息，请参阅功能：支持 NgModules 层次结构，无延迟加载