Именованный маршрутизатор и вложенные маршруты в angular 6

Может ли кто-нибудь помочь в навигации по определенному маршруту. Я сижу с этим уже несколько часов. Вот что у меня есть:

const routes: Routes = [
  {
    path: '', redirectTo: 'home', pathMatch: 'full'
  },
  {
    path: 'home',
    component: MainlayoutComponent,
    canActivate: [AuthenticatedGuard],
    children: [
      { path: 'listmanagement', component: ListmanagementComponent, outlet: 'main' },
      {
        path: 'buildings', component: BuildingslistComponent, outlet: 'main',
        children: [
          { path: '', redirectTo: 'buildings', pathMatch: 'full' },
          { path: 'building', component: BuildingdetailComponent },
          { path: 'building/:code', component: BuildingdetailComponent }
        ]
      },
      {
        path: 'calendarandrates', component: CalendarandratesComponent, outlet: 'main',
        children: [
          { path: '', redirectTo: 'calendarandrates', pathMatch: 'full' },
          { path: 'rescalendar', component: RescalendarlistComponent },
          { path: 'roomrates', component: ResratesmainComponent },
        ]
      },
      { path: 'users', component: UsersComponent, outlet: 'main' },
    ]
  },
  {
    path: 'login',
    component: LoginlayoutComponent,
    children: [
      { path: '', component: LoginComponent, outlet: 'login' },
    ]
  },
  {
    path: '**',
    component: NotfoundComponent,
    canActivate: [AuthenticatedGuard],
    outlet: 'main'
  }
];

Тогда в моем app.component у меня есть только основная розетка маршрутизатора:

<router-outlet></router-outlet>

Предполагается, что этот выход маршрутизатора загружает только один из двух компонентов макета, maned loginlayout.component и mainlayout.component: один, когда пользователь не вошел в систему (чтобы не отображать боковую навигацию и другие элементы панели инструментов, этот компонент макета имеет только простой логотип в верхнем левом углу и заголовок посередине), а другой компонент макета имеет боковую навигацию и другие элементы на панели инструментов. Все это работает нормально, и я могу войти в систему, используя первый макет, и загрузить второй макет. Маршрутизаторы на соответствующих страницах макета:

<router-outlet name="login"></router-outlet>
<router-outlet name="main"></router-outlet>

Каким-то образом, оказавшись в основном компоненте компоновки, я могу перейти к дочернему элементу 1-го уровня (например, зданиям), используя что-то вроде:

this.router.navigate(['/home', { outlets: { main: ['buildings'] } }])

Кажется, я не могу понять, как я могу перейти ко второму более позднему дочернему элементу (например, однажды в компоненте зданий я хочу перейти к (одному) элементу здания, щелкнув редактирование (с параметром) или добавив (без параметра) новая кнопка

Я искал и получаю только примеры только с одним дочерним уровнем, но не с двумя уровнями, как в этом примере. Любая помощь будет оценена.


angular-routing router-outlet nested-routes
person Mbongo    schedule 28.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я исправил свою проблему и просто продолжил разработку. Теперь, когда я закончил, я подумал, что мне нужно просто опубликовать свое исправление. Я изменил маршруты, чтобы они выглядели так:

const routes: Routes = [

  /*==================================Main Outlet==================================*/
  {
    path: '', redirectTo: 'home', pathMatch: 'full'
  },
  {
    path: 'home', component: MainlayoutComponent, canActivate: [AuthGuard],
    children: [
      { path: '', component: HomeComponent, outlet: 'main' },

      { path: 'listmanagement', component: ListmanagementComponent, outlet: 'main' },

      { path: 'buildings', component: BuildingslistComponent, outlet: 'main' },
      { path: 'buildings/building/:code', component: BuildingdetailComponent, outlet: 'main' },
      { path: 'buildings/building', component: BuildingdetailComponent, outlet: 'main' },
      { path: 'buildings/allbedspaces', component: BedspacelistComponent, outlet: 'main' },

      { path: 'calendarandrates', component: CalendarandratesComponent, outlet: 'main' },
      { path: 'calendarandrates/rescalendar', component: RescalendarlistComponent, outlet: 'main' },
      { path: 'calendarandrates/roomrates', component: ResratesmainComponent, outlet: 'main' },

      { path: 'users', component: UsersComponent, outlet: 'main' },
      { path: 'users/myaccount', component: MyaccountComponent, outlet: 'main' },

      { path: '**', component: NotfoundComponent, canActivate: [AuthGuard], outlet: 'main' }
    ]
  },

  /*==================================Login Outlet==================================*/
  {
    path: 'login', component: LoginlayoutComponent,
    children: [{ path: '', component: LoginComponent, outlet: 'login' } ]
  }
];

Затем при переходе к маршруту я просто использую следующий код:

this.router.navigate(['/home', { outlets: { main: ['buildings', 'allbedspaces'] } }], { skipLocationChange: true })

skipLocationChange: true, потому что я пропускаю все изменения своего местоположения при маршрутизации и всегда сохраняю базовый URL-адрес, поскольку я не хочу, чтобы пользователи перемещались по приложению с помощью адресной строки

person Mbongo    schedule 07.12.2018