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关联的组件。它似乎是这样做的，因为＆＃39; list＆＃39;也是在延迟加载的模块中定义的。如果我改变了列表＆＃39;到了历史＆＃39;在为触摸点模块路由数据时，http://localhost:4200/contact/list加载适当的组件。

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

我需要对路线定义做出哪些更改才能方便使用＆＃39; list＆＃39;在同一功能区内的多条路线（即联系人）？

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

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

plunker demonstrating route getting squashed

点击＆＃39;联系人列表＆＃39; plunker中的链接加载触摸点列表，而不是加载联系人列表。 Touch Points是Contact域内的延迟加载模块。

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

联系模块的列表路由（/contact/list）使用＆＃39; list＆＃39;因为它的路线。接触点列表路由需要为/contact/:id/touch-points/list。因为在两个路由中都使用list，所以定义的最后一个路由会覆盖第一个路由，然后在导航到/contact/list路由时会加载接触点列表的组件。

谢谢。

Answer 1

当你看到它的样子时，你会打你的额头。

您正在contact.module.ts中导入TouchPoint模块（第4行和第15行）。这就是在你的'＃list;＆＃39;路径。

删除它们，它工作正常。

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

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

1 个答案: