Angular 4 LazyLoad 子路径在子路径相同时失败

Question

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

查看联系人列表：

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 关联的组件。这样做似乎是因为 'list' 也是在延迟加载的模块中定义的。如果我在接触点模块的路由数据中将 'list' 更改为 'history'，则 http://localhost:4200/contact/list 加载适当的组件。

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

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

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

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

plunker demonstrating route getting squashed

在 plunker 中单击 'Contact List' link 会加载接触点列表，而不是加载联系人列表。 Touch Points 是 Contact 域中的一个延迟加载模块。

应该发生的是导航到联系人列表。单击联系人应该会带您进入联系人详细信息页面，您可以单击接触点 link 查看 selected 联系人的接触点列表。

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

谢谢。

Answer 1

当你看到它的时候，你会拍自己的额头。

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

删除那些，它工作正常。

Angular 4 LazyLoad 子路径在子路径相同时失败

Angular 4 LazyLoad child routes fails when child has same path

angular-routing

angular

angular-router

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