路径名称在导航栏中与 Angular2 组件路由器中的子路由重复答案

【问题标题】：Path name duplicated in navigation bar with children routes in Angular2 Component Router路径名称在导航栏中与 Angular2 组件路由器中的子路由重复
【发布时间】：2016-12-09 03:25:17
【问题描述】：

我在将组件路由器集成到我的 Angular2 应用程序时遇到了一些问题，因为当我尝试在我的应用程序中导航时出现以下错误：'EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes:'

因此，根据 Stackoverflow 和 The Official docs 的一些建议，我将重定向对象应用于我的 Routes 中的子路由，就像这样

children: [
    {
        path: ':id',
        component: DetailMoreLayout
    },
    {
        path: '',
        redirectTo: 'parent-path',
        pathMatch: 'full'
    }
]

所以在我的应用程序中，我有以下路线。请注意DisplayRoutes 是我通过扩展Route 对象制作的自定义类型：

export const routes:DisplayRoutes = [
    {
        path: '',
        display: 'Home',
        component: HomeComponent
    }, {
        path: 'about-us',
        display: 'About Us',
        component: LeftSubNavigation,
        index: {
            component: DetailMoreLayout
        },
        children: [
            {
                path: ':id',
                component: DetailMoreLayout
            },
            {
                path: '',
                redirectTo: 'about-us',
                pathMatch: 'full'
            }
        ]
    }, {
        path: 'teams',
        display: 'Teams',
        component: LeftSubNavigation,
        index: {
            component: DetailMoreLayout
        },
        children: [
            {
                path: ':id',
                component: DetailMoreLayout
            },
            {
                path: '',
                redirectTo: 'teams',
                pathMatch: 'full'
            }
        ]
    }, {
        path: 'careers',
        display: 'Careers',
        component: LeftSubNavigation,
        index: {
            component: DetailMoreLayout
        },
        children: [
            {
                path: ':id',
                component: DetailMoreLayout
            },
            {
                path: '',
                redirectTo: 'careers',
                pathMatch: 'full'
            }
        ]
    }, {
        path: 'press',
        display: 'Presse',
        component: LeftSubNavigation,
        index: {
            component: DetailBlogLayout
        },
        children: [
            {
                path: ':id',
                component: DetailBlogLayout
            },
            {
                path: '',
                redirectTo: 'press',
                pathMatch: 'full'
            }
        ]
    }, {
        path: 'technology',
        display: 'Technology',
        component: LeftSubNavigation,
        index: {
            component: DetailBlogLayout
        },
        children: [
            {
                path: ':id',
                component: DetailBlogLayout
            },
            {
                path: '',
                redirectTo: 'technology',
                pathMatch: 'full'
            }
        ]
    }, {
        path: 'promotion',
        display: 'Promotion',
        component: LessLayout
    }, {
        path: 'contact',
        display: 'Contact',
        component: LeftSubNavigation,
        index: {
            component: DetailMoreLayout
        },
        children: [
            {
                path: ':id',
                component: DetailMoreLayout
            },
            {
                path: '',
                redirectTo: 'contact',
                pathMatch: 'full'
            }
        ]
    }
];

现在一切都很酷，但我应该在我的 HTML 模板中使用 routerLink 指令链接到路由还是在组件中使用 .navigateByUrl(route) 或 .navigate([route]) 方法我的 url / 路径被复制所以 http://localhost:4200/about-us/变为http://localhost:4200/about-us/about-us。即使直接或“深度链接”到http://localhost:4200/about-us，浏览器中的网址也会更改为http://localhost:4200/about-us/about-us

我做错了什么？任何人都可以看到吗？我尝试将pathMatch: 'full' 设置为pathMatch: 'prefix'，但这不起作用。我正在使用"@angular/router": "3.0.0-beta.2"

【问题讨论】：

标签： typescript angular

【解决方案1】：

我认为您在应用程序中实现了经典的主从模式，它是无组件路由器的完美用例。

您需要重构父模板以使用 2 个路由器出口左/右并在那里加载。

看到这个优秀的article

旁注：您的应用程序当前行为与配置一致。
当您在位置栏中输入/about-us 时，它会查找'' 路由器，它说要再次访问about-us，因此它会再次添加about-us。

【讨论】：

【解决方案2】：

不完全确定，因为我没有经常使用新路由器，但我怀疑您应该将重定向更改为 redirectTo: '../about-us'。这样，它将导航到父 router 并在其中搜索 about-us 路径：

export const routes:DisplayRoutes = [
    {
        path: '',
        display: 'Home',
        component: HomeComponent
    }, {
        path: 'about-us',
        display: 'About Us',
        component: LeftSubNavigation,
        index: {
            component: DetailMoreLayout
        },
        children: [
            {
                path: ':id',
                component: DetailMoreLayout
            },
            {
                path: '',
                redirectTo: '../about-us', //<-- here
                pathMatch: 'full'
            }
        ]
    },
    ...
]

【讨论】：