Используя подстановочные знаки в середине углового маршрута? - PullRequest
Новая
       4

Используя подстановочные знаки в середине углового маршрута?

0 голосов
/ 23 марта 2019

Я использую одну страницу для сбора и отображения данных для сотен различных маршрутов.Я хочу, чтобы на моей странице были «вкладки», чтобы перемещаться между различной информацией, однако я не могу создать суффикс или использовать подстановочные знаки в компоненте.Я также хочу перенаправить к потомку / tab1

Что у меня есть (и работает)

У меня есть приложение.Он содержит 1 маршрут, XXX и 1 компонент xxx.component.ts (реальное приложение на самом деле имеет 20 маршрутов на одном уровне, но в данный момент это не важно).
xxx.component.ts вызывает меню изфайл json, содержащий несколько ссылок: 

xxx/111/222
xxx/333/444
xxx/122/212

У меня нет маршрутов в xxx.routing, только шаблон, который перенаправляет на xxx.component.ts

xxx.component.ts по существу использует urlfragments для получения 111 и 222 и уходит в API для получения данных для 111/222.Все страницы в формате XXX имеют одинаковый формат, только разные данные.

Все до этого момента работает!(Yay)

Что я не могу понять

Теперь я хочу иметь вкладки или другой слой навигации в зависимости от того, как вы хотите посмотреть на это.

xxx/111/222/tab1
xxx/111/222/tab2
xxx/111/222/tab3

Я также хочу перенаправить на tab1, если я просто нажму xxx / 111/222

Я использую такие вещи, как xxx/*/*/tab1 в маршрутизации для компонента, но это не такработает.
Я смотрел на использование переменных, xxx /: var1 /: var2 / tab1, и он не работает.

routing.ts 

const routes: Routes = [
  {
    path: '',
    component: DashboardsComponent,
    children: [
        {
          path: 'xxx',
          loadChildren: './xxx/dashboards-xxx.module#DashboardsxxxModule',
          pathMatch: 'prefix',
          // canActivate: [AuthGuardService],

    },
    ],
  }, {
    path: '**',
    component: NotFoundComponent,
  },
];

xxx.routing.ts

const routes: Routes = [
  {
    path: '**',
    component: DashboardsxxxComponent,
    // canActivate: [AuthGuardService],
  },
];

1 Ответ

0 голосов
/ 24 марта 2019

Насколько я знаю, вы не можете найти подстановочный знак; он предназначен для универсальной работы, если нет пути, который Angular может найти первым.

Если вы потеряете совпадение префикса, вы сможете использовать маршрут «xxx» для перехода к вашему ленивому модулю, а затем использовать параметры маршрута, чтобы соответствовать вашим сегментам и обрабатывать перенаправление.

Если вы структурируете свои корневые маршруты как: 

export const appRoutes: Route[] = [
  {
    path: '',
    component: DashboardComponent,
    children: [
      {
        path: 'xxx',
        loadChildren: './tabs/tabs.module#TabsModule',
      }
    ]
  }
];

и ваш ребенок отправляется как: 

export const tabRoutes: Route[] = [
  {
    path: ':param1/:param2/:tab',
    component: TabsComponent,
  },
  {
    path: ':param1/:param2',
    redirectTo: ':param1/:param2/tab1'
  }
];

должно работать как положено. Похоже, StackBlitz не нравится мой импорт маршрутов, но вот рабочий пример: https://1drv.ms/u/s!Aun50jHsxPB0gcd5dMXKK4GsAalcbA

...