我正在将正在开发的应用程序升级到最新的Angular 2候选版本.作为这项工作的一部分,我正在try 使用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)

With all of that in place, I have a UsersModule which imports the userRouting, 和 then an AdminModule that imports the adminRoutes 和 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 和 navigation of my application.

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 和 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.

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

推荐答案

好吧,在周末的大部分时间里,我都在摆弄这个,然后我就开始运行了.最终对我有用的是做以下几件事:

  • 导出每个要路由的模块的所有Routes个.不要导入子模块中的任何RouterModule.forChild().
  • 导出从childs模块定义中的childs管线定义中可见的every个组件.
  • 照常导入(即TypeScript import关键字)所有子路由,并使用...运算符将其合并到正确的路径下.我无法让它与定义路径的子模块一起工作,但是将它放在父模块上可以很好地工作(并且与惰性加载兼容).

在我的例子中,我在这样的层次 struct 中有三个层次:

  • Root (/)
    • 编辑(editor/:projectId)
    • 正面(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'
        }
    ]
}

查询编辑器的最后一部分如下所示:

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

然而,要实现这一点,一般Editor需要导入and导出QueryEditor,QueryEditor需要导出QueryCreateComponentQueryEditorComponent,因为它们在导入时是可见的.如果做不到这一点,将导致Component XYZ is defined in multiple modules左右的错误.

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

Angular相关问答推荐

我使用Ngrx的子集 Select 器不起作用

Angular前端调用ALB身份验证后的后端并重定向

CDK虚拟滚动由于组件具有注入属性而在滚动时看到错误的值

如何从URL中角下载图片?

具有多个输入的Angular struct 指令在第一次加载构件时没有值

天使17中的倒计时器

大型 Angular 12 应用程序 - 我如何管理 js 文件

Angular UNIVERSAL prerender 错误方法 Promise.prototype.then 调用不兼容的接收器 [object Object]

当我ng serve时,Angular CLI 提示TypeError: callbacks[i] is not a function

类继承支持

怎样在 Angular 2 或 4 中将输入字段设为只读?

错误:您要查找的资源已被删除、名称已更改或暂时不可用

无法获得 angular-material md-sidenav 的 100% 高度

取消订阅服务中的http observable

使用 Jasmine 和 Karma 对 Angular 进行单元测试,错误:无法绑定到xxx,因为它不是xxxxxx的已知属性.

Angular 2 Material Design 组件是否支持布局指令?

实现autocomplete功能

在 Angular 2 中使用 store (ngrx) 有什么好处

Angular2 - 从外部验证和提交表单

如何在 Angular CLI 的构建时插入内部版本号或时间戳