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

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

1 голос
/ 29 апреля 2020

У меня есть основной модуль, скажем, app-routing.module следующим образом: 

const ROUTES: Routes = [
  {
    path: 'sport',
    loadChildren: './sport/sport.module#SportModule',
    data: { game: GAME.SPORT }
  }
  {
    path: 'horse-racing',
    loadChildren: './sport/sport.module#SportModule'
    data: { game: GAME.HORSE_RACING }
  }
]

Тогда в sport-модуле у меня есть: 

const ROUTES: Routes = [
  {
    path: 'horse-racing',
    component: RacingComponent
  }
  {
    path: '',
    component: SportComponent
  }
]

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

  1. / sport , чтобы отобразить следующий маршрут в спортивном модуле: 
    {
       path: '',
       component: SportComponent
    }
/ скачки для сопоставления со следующим маршрутом в спортивном модуле: 
    {
       path: 'horse-racing',
       component: RacingComponent
    }

Вопрос: Как настроить app-routing.module чтобы загрузить маршрут скачек напрямую?

Ответы [ 2 ]

0 голосов
/ 30 апреля 2020

Дочерний маршрут всегда добавляет что-то к родительскому маршруту. Это означает, что если вы хотите сгруппировать SportComponent и HorseRacingComponent в SportModule и , дочерние маршруты должны быть определены как /sport и /horse-racing (например, localhost: 4200 / horse-racing ) маршрут root должен быть пустым.

Решение

Таким образом, маршрут root в AppRoutingModule будет: 

const appRoutes: Routes = [
  { path: '', loadChildren: './sports/sport.module#SportModule' },
  { path: '**', component: PageNotFoundComponent }
];

, а дочерний маршрут в SportingRouteModule: 

const sportRoutes: Routes = [
  { 
    path: '', 
    children: [
      { path: 'sport', component: SportComponent },
      { path: 'horse-racing', component: HorseRacingComponent }
    ]
  },
];

Установите этот Stackblitz, чтобы увидеть, как он работает: https://stackblitz.com/edit/angular-yh5xep

Альтернатива

С другой стороны с другой стороны, вы можете настроить дочерние маршруты как /sport и /sport/horse-racing, где '/ sport' является дочерним маршрутом по умолчанию для SportComponent. В этом случае маршруты root можно настроить следующим образом: 

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'sport', loadChildren: './sports/sport.module#SportModule' },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

И дочерний маршрут в SportRoutingModule: 

const sportRoutes: Routes = [
  { 
    path: '', 
    children: [
      { path: '', component: SportComponent },
      { path: 'horse-racing', component: HorseRacingComponent }
    ]
  },
];

Демонстрация альтернативного решения: https://stackblitz.com/edit/angular-rh8drh

0 голосов
/ 29 апреля 2020

, пожалуйста, попробуйте добавить вот так 

const ROUTES: Routes = [
  {
    path: 'horse-racing',
    component: RacingComponent
  },
  {
    path: 'sport',
    component: SportComponent
  },
  {
    path: '',
    redirectTo: '/horse-racing',
    pathMatch: 'full',
    runGuardsAndResolvers: 'always'
  }
]

, поэтому по умолчанию, если после localhost:4200 есть пустая строка, он будет перенаправлен на localhost:4200/horse-racing

...