Угловая маршрутизация детей должна идти на /

Question

Я не знаю, как управлять маршрутизацией, например:

• имя хоста /: имя пользователя /
• имя хоста /: имя пользователя / работы
• имя хоста /: имя пользователя / События

Итак, главная проблема здесь в том, что я всегда получаю имя хоста /: имя пользователя / общее , которое должно быть имя хоста /: имя пользователя /

{
  path: ':username',
  component: ProfileComponent,
  resolve: {
    user: ProfileResolve
  },
  children: [
    {
      path: '',
      redirectTo: 'general',
      pathMatch: 'full'
    },
    {
      path: 'general',
      component: GeneralComponent
    },
    {
      path: 'events',
      component: ProfileEventsComponent
    },
    {
      path: 'jobs',
      component: ProfileJobsComponent
    },
  ]
}

Answer 1

Прежде всего удалите remove redirectTo, которое перенаправляет пустое значение на general. Вместо этого вы можете сопоставить компонент по умолчанию.

path: ':username',
component: ProfileComponent,
resolve: {
  user: ProfileResolve
},
children: [
  { path: '', component: GeneralComponent },
  { path: 'general', component: GeneralComponent },
  { path: 'events', component: ProfileEventsComponent },
  { path: 'jobs', component: ProfileJobsComponent },
]

Вы можете полностью удалить redirectTo, если не хотите загружать какой-либо компонент GeneralComponent, ProfileEventsComponent или ProfileJobsComponent по умолчанию.

Answer 2

Проблема из-за этого redirectTo в случае пустого маршрута (''). Его значение должно было быть redirectTo: './general' вместо redirectTo: 'general'

Измените конфигурацию вашего маршрута:

{
    path: ':username',
    component: ProfileComponent,
    children: [
      { path: '', redirectTo: './general', pathMatch: 'full' },
      { path: 'general', component: GeneralComponent },
      { path: 'events', component: ProfileEventsComponent },
      { path: 'jobs', component: ProfileJobsComponent },
    ]
}

Вот Образец StackBlitz для вашей ссылки.