как определить угловой маршрут 6 для многоуровневого пути

Question

Я хочу определить многоуровневый маршрут в угловых 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 уже определен во втором маршруте, как мне обновить первый маршрут здесь?

Я изменил первый на

path: 'Overview',redirectTo: 'Overview / reg', полностью провал.

Я мог бы определить все маршруты в первом определении маршрута, но это не совсем элегантно.Я хочу, чтобы определение маршрута обзора в его собственном модуле было здесь.

Надеюсь, вы понимаете, что я имею в виду здесь.

Спасибо

Answer 1

согласен с решением Chrillewoodz.Кроме того, хорошо бы поместить компонент 'review' и его детей в функциональный модуль.Там вы можете определить файл маршрута для этого функционального модуля.

см. Официальный документ Angular здесь , а также тему разговора Деборы Кураты об Angular router в NgConf этого года

Answer 2

Попробуйте это:

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

];

Ангуар говорит, что не может найти маршрут приборная панель / обзор / регистр , потому что вы не определили, гдеis приборная панель / обзор .Просто поместите его в путь первого компонента.

Answer 3

Простой, просто укажите пустой путь для OverViewComponent:

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