0

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

查看联系人列表：

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

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

    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) 并加载适当的组件。

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

--- 2017 年 8 月 1 日更新 ---

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

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

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

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

谢谢你。

4

1 回答 1

5

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

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

删除那些，它工作正常。

于 2017-08-02T21:13:56.080 回答