如何路由到作为模块的子模块的模块 - 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

在路由器的早期版本中，这很容易使用children"来完成

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)

有了所有这些，我有一个导入 userRouting 的 UsersModule，然后是一个导入 adminRoutes 和 UsersModule 的 AdminModule.我的想法是，由于 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

此外，因此，新用户组件未加载到我的管理组件的路由器出口中，这会影响我的应用程序的样式和导航.

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().
• 导出从子模块定义中的子路由定义可见的每个组件.
• 像往常一样导入(意味着 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)

    以下定义适用于 /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屋！