Angular 6 маршрутизация - настройка дочернего компонента маршрута на основе параметров родительского маршрута - PullRequest
Новая
       6

Angular 6 маршрутизация - настройка дочернего компонента маршрута на основе параметров родительского маршрута

0 голосов
/ 12 февраля 2019

У меня есть следующая конфигурация маршрутизации в моем проекте Angular 6. 

    path: 'chart/:feature',
    component: ChartStateComponent,
    canActivateChild: [ChartGuardService],
    children: [
        {
            path: ':id',
            redirectTo: '/chart/:feature/:id/profile',
            pathMatch: 'full'
        },
        {   path: ':id/:tab',
            component: TestOneComponent,
            pathMatch: 'full'
        }
    ]

feature является параметром родительского пути и может иметь 4 различных значения, таких как one, two, threeи four.Теперь, в зависимости от этого параметра, мне нужно установить компонент для children path.

Например, если feature установлен one, тогда установить TestOneComponent как дочерний компонент.

Как мне этого добиться?

1 Ответ

0 голосов
/ 12 февраля 2019

Вы можете попробовать это: 

path: 'chart',
component: ChartStateComponent,
canActivateChild: [ChartGuardService],
children: [
    {
        path: 'one/:id',
        redirectTo: 'one/:id/profile',
        pathMatch: 'full'
    },
    {   path: 'one/:id/:tab',
        component: TestOneComponent
    },
    {   path: 'two/:id/:tab',
        component: TestTwoComponent
    },
    ...
],

В качестве альтернативы, вы можете создать охрану маршрута для обработки более сложной маршрутизации.См. Этот вопрос для получения дополнительной информации: Angular2 условная маршрутизация

ОБНОВЛЕНИЕ

Я не уверен, как вы могли бы добавить условное на основе параметра ... но вы можетедобавьте условие на основе глобальной переменной.

В файле "Globals": 

 export class Globals {
    public static ISADMIN: boolean = false;
 }

В определениях маршрутов вашего модуля 

  {
    path: 'products/:id',
    component: Globals.ISADMIN ?  ProductAdminComponent : ProductDetailComponent
  },
...