当孩子具有相同的路径时，Angular 4 LazyLoad 子路由失败

Question

我有一个显示联系人列表的应用程序，可以选择单个联系人并查看其详细信息。联系人详细信息页面有几个选项卡，用于显示有关联系人的子信息（个人资料、接触点和联系信息）。以下是相关网址：

要查看联系人列表：

• http://localhost:4200/contact/list

查看给定联系人的所有接触点

• http://localhost:4200/contact/84/touch-points/list

以下是构建联系人列表路由以及联系人详细信息延迟加载路由的路由数据：

    export const routing: ModuleWithProviders = RouterModule.forChild(
    [
        {
            path: 'list',
            component: PageContactListComponent
        },
        //... other routes here...
        {
            path: ':id',
            component: PageContactDetailComponent,
            children:
            [
                //... other routes here...
                //LAZY LOADED:
                { path: 'touch-points',     loadChildren: './detail/components/touch-points/touch-points.module#TouchPointModule' }             ]
        }
    ]);

这是接触点模块的路由数据。

    export const routing:ModuleWithProviders = RouterModule.forChild(
    [   
        {
            path: '',
            pathMatch: 'full',
            redirectTo: 'list'
        },
        {
            path: 'list',
            component: TouchPointListComponent
        }
    ]);

当我导航到http://localhost:4200/contact/list 时，Angular 会尝试加载与http://localhost:4200/contact/84/touch-points/list 关联的组件。似乎这样做是因为“列表”也在延迟加载的模块中定义。如果我在接触点模块的路由数据中将“列表”更改为“历史”，则http://localhost:4200/contact/list 会加载相应的组件。

Angular 4 路由器应该能够区分这些路由：(http://localhost:4200/contact/list, http://localhost:4200/contact/84/touch-points/list) 并加载适当的组件。

我需要对我的路由定义进行哪些更改以方便在同一功能区域（即联系人）内的多个路由中使用“列表”？

--- 更新 08/01/2017 ---

我创建了以下演示此问题的 plunker：

• plunker demonstrating route getting squashed

点击 plunker 中的“联系人列表”链接会加载接触点列表，而不是加载联系人列表。 Touch Points 是 Contact 域中的延迟加载模块。

应该发生的是导航到联系人列表。点击联系人应该会转到联系人详细信息页面，您可以点击接触点链接查看所选联系人的接触点列表。

联系人模块的列表路由 (/contact/list) 使用“列表”作为其路由。接触点列表路由需要为/contact/:id/touch-points/list。因为list 用于两个路由，所以定义的最后一个路由会覆盖第一个路由，随后在导航到/contact/list 路由时会加载接触点列表组件。

谢谢。

Answer 1

当你看到它是什么时，你会打你的额头。

您在 contact.module.ts（第 4 行和第 15 行）中导入了 TouchPoint 模块。这就是踩在你的“列表”路径上的东西。

删除那些，它工作正常。