如何作为模块的子级路由至模块-Angular 2 RC 5 [英] How to route to a Module as a child of a Module - Angular 2 RC 5

问题描述

我正在将正在开发的应用程序升级到最新的Angular 2候选版本.作为这项工作的一部分，我试图使用NgModule规范并将应用程序的所有部分迁移到模块.在大多数情况下，除了路由问题外，一切进展顺利.

I am in the process upgrading an application I'm working on to the latest Angular 2 release candidate. As part of this work I am attempting to use the NgModule spec and migrating all of the parts of my application to modules. For the most part, this has gone very well with the exception of an issue with routing.

"@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",

我的应用程序是由模块组成的，其中几个模块作为父模块的子级粘合在一起.例如，我有一个管理模块，由一个通知模块，一个用户模块和一个电话模块组成(例如).这些模块的路由应类似于...

My app is built as a composition of modules, with several modules being glued together as children of a parent module. For example, I have an Admin Module that consists of a Notifications Module, a Users Module, and a Telphony Module (for example). The routes to these modules should look like...

/admin/notifications/my-notifications
/admin/users/new-user
/admin/telephony/whatever

在较早版本的路由器中，使用儿童"很容易做到这一点

In the earlier release of the router, this was easy to accomplish using "children"

export const AdminRoutes: RouterConfig = [
   {
      path: "Admin",
      component: AdminComponent,
      Children: [
         ...UserRoutes,
         ...TelephonyRoutes,
         ...NotificationRoutes
      ]
   }
]

在另一个文件中，作为子模块的一部分，我还要定义各个模块的路由，即

In another file, as part of the sub-modules, I'd define the individual module routes as well i.e.

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

]

这一切都很好.在升级到模块的过程中，我将所有内容移到了各自的路由文件中，所以现在这两个看起来更像这样

This all worked very well. In the process of upgrading to Modules, I moved everything into their own individual routing files instead so now these two look more like this

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)

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

With all of that in place, I have a UsersModule which imports the userRouting, and then an AdminModule that imports the adminRoutes and the UsersModule. My thought was that since UsersModule is a child of AdminModule, the routing would work the way it used to. Unfortunately, it doesn't so I end up with a users route that is just

/users/new-user 

代替

/admin/users/new-user

此外，由于这个原因，新用户组件没有加载到我的admin组件的路由器出口中，从而中断了我的应用程序的样式和导航.

Further, because of this, the new-user component isn't loaded into the router outlet of my admin component which throws off the styling and navigation of my application.

我一生无法提出如何将UserModule的路由作为AdminModule的子代引用.我尝试用旧方法执行此操作，并得到有关两个模块中路由的错误.显然，由于它是新发布的，因此围绕这些案例的文档有些局限.

I can't for the life of me come up with how to reference the routes of my UserModule as children of my AdminModule. I've tried doing this the old way and get errors about the routes being in two Modules. Obviously since this is newly released, the documentation around some of these cases is a bit limited.

任何人都能提供的帮助将不胜感激！

Any help anyone can provide would be greatly appreciated!

推荐答案

好的，在周末的大部分时间里摆弄这个东西之后，我就开始运行它了.最终对我有用的是执行以下操作:

Okay, after fiddling around with this for the better part of the weekend I got it running on my end. What worked for me in the end was to do the following:

• 导出所有要布线的模块的所有Routes.请勿在子模块中导入任何RouterModule.forChild().
• 导出每个组件，该组件可从childs模块定义中的childs路由定义中看到.
• 照常导入(意味着Typescript import关键字)所有子路由，并使用...运算符将这些子路由合并到正确的路径下.我无法让它与定义路径的子模块一起使用，但是将其放在父模块上可以很好地工作(并且与延迟加载兼容).

• Export all Routes for every module you want to route. Do not import any of the RouterModule.forChild() in the child modules.
• Export every component that is visible from the childs route definitions in the childs module definition.
• Import (meaning the Typescript import keyword) all child routes as usual and use the ... operator to incorporate these under the correct path. I couldn't get it to work with the child-module defining the path, but having it on the parent works fine (and is compatible to lazy loading).

在我的情况下，我在这样的层次结构中具有三个级别:

In my case I had three levels in a hierarchy like this:

• 根(/)
  • 编辑器(editor/:projectId)
    • 查询(query/:queryId)
    • 页面(page/:pageId)
    • Root (/)
      • Editor (editor/:projectId)
        • Query (query/:queryId)
        • Page (page/:pageId)

        对于/editor/:projectId/query/:queryId路径，以下定义对我有用:

        The following definitions work for me for the /editor/:projectId/query/:queryId path:

        // 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的最后一部分看起来像这样:

        And the final part for the QueryEditor looks like this:

        // 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的错误中犯错.

        However, to make this work, the general Editor needs to import and export the QueryEditor and the QueryEditor needs to export QueryCreateComponent and QueryEditorComponent as these are visible with the import. Failing to do this will get you errors along the lines of Component XYZ is defined in multiple modules.

        请注意，延迟加载在此设置下也可以正常工作，在这种情况下，当然不应导入子路由.

        Notice that lazy loading also works fine with this setup, in that case the child-routes shouldn't be imported of course.

        这篇关于如何作为模块的子级路由至模块-Angular 2 RC 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！