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

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

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

путь: «обзор», перенаправление на: «обзор/reg», полностью не удалось.

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

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

Спасибо


angular angular6 angular-router
person user3006967    schedule 01.06.2018    source источник

Ответы (3)


arrow_upward
4
arrow_downward

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

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

];

Anguar говорит, что не может найти маршрут dashboard/overview/reg, потому что вы не определили, где находится dashboard/overview. Просто поместите его в путь к первому компоненту.

person Mariusz.v7    schedule 01.06.2018

arrow_upward
0
arrow_downward

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

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

arrow_upward
0
arrow_downward

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

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

person Joseph Wu    schedule 01.06.2018
comment
Я протестировал решение @chrillewoodz, но оно не работает, смотрите мое обновленное содержимое. - person user3006967; 01.06.2018
comment
если вы уже определили модуль обзора и его собственный файл маршрута, убедитесь, что вы зарегистрировали маршрут с помощью команды forChild в файле модуля: imports: [RouterModule.forChild(routes)], - person Joseph Wu; 01.06.2018