Именованный роутер и вложенные маршруты в угловых 6 - PullRequest
Новая
       29

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

0 голосов
/ 28 ноября 2018

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

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'] } }])

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

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

1 Ответ

0 голосов
/ 07 декабря 2018

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

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, так как я не хочу, чтобы пользователи перемещались по приложению, используя адресную строку

...