如何为多级路径定义角度 6 路径答案

【问题标题】：how to define angular 6 route for multiple level path如何为多级路径定义角度 6 路径
【发布时间】：2018-06-01 06:10:10
【问题描述】：

我想在 Angular 6 中定义多级路线，这是我需要的：

对于一级路线，我有：

dashboardRoutes:Routes=[
    {
        path: "dashboard",
        component: DashobardComponent,
        canActivate: [AuthGuard],
        children:[
            {
                path: 'user', component: UserComponent,
            },
            {
                path: 'overview', component:OverViewComponent
            }
        ]
    }
];

但现在，我想拥有自己的孩子，所以我将 html 定义为：

<div>This is overvew</div>
<router-outlet></router-outlet>

然后我定义了如下概览路线：

    const overviewRoutes:Routes = [
    {
        path: "",
        component: OverViewComponent,
        children:[
            {
                path:'reg',
                component: RegularComponent
            },
            {
                path:'rt',
                component: RealTimeComponent
            }
        ]
    }
];

然后我得到了错误：

 Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/overview/reg'

现在，我迷路了，overView 已经定义在第二条路由中，我应该如何在此处更新第一条路由？

我把第一个改成

路径：'overview'，redirectTo:'overview/reg'，完全失败。

我可以在第一个路由定义中定义所有路由，但这根本不够优雅。我想要在它自己的模块中的概览路由定义。

希望你明白我的意思。

谢谢

【问题讨论】：

标签： angular angular-router angular6

【解决方案1】：

试试这个：

const overviewRoutes:Routes = [
{
    path: "dashboard/overview", // <-- missed this
    component: OverViewComponent,
    children:[
        {
            path:'reg',
            component: RegularComponent
        },
        {
            path:'rt',
            component: RealTimeComponent
        }
    ]
}

];

Aguar 说它找不到路线 dashboard/overview/reg，因为您没有定义 dashboard/overview 的位置。简单地把它放到第一个组件的路径中。

【讨论】：

【解决方案2】：

很简单，只需为OverViewComponent 留一个空路径：

const overviewRoutes:Routes = [
    {
        path: "",
        component: OverViewComponent,
        children:[
            {
                path:'reg',
                component: RegularComponent
            },
            {
                path:'anotherPage',
                component: anotherPageComponent
            }
        ]
    }
];

【讨论】：

【解决方案3】：

同意 Chrillewoodz 的解决方案。此外，最好将“review”组件及其子组件放入功能模块中。在那里，您可以为此功能模块定义路由文件。

参见官方 Angular 文档here，以及 Deborah Kurata 在this year's NgConf 中的 Angular 路由器主题演讲

【讨论】：

我使用@chrillewoodz 解决方案进行了测试，无法正常工作，请查看我的更新内容
如果你已经定义了一个review模块和它自己的路由文件，确保你在模块文件中使用'forChild'命令注册路由：imports: [RouterModule.forChild(routes)],