Angular 6 Использование роутера-розетки

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

Пример:

app.component.html

<!--<app-basic></app-basic> -->
<router-outlet></router-outlet>
<h1>hello</h1>
<router-outlet name="sidebar"></router-outlet>

модуль роутера у меня такой:

{
  path: 'schedule-inspection',
  component: ScheduleInspectionComponent,
  children: 
  [
    {
      path: 'add',
      component: SidebarScheduleInspectionComponent,
      outlet: 'sidebar',
    },
  ],
},

В результате страница загружает родительский компонент и отображает приветствие. Контент не отображается вне указанного выхода.

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


angular router-outlet angular6
person James Kenneth Hunter    schedule 28.07.2018    source источник
comment
вы нажимаете на URL-расписание-проверка/добавление   -  person Avij    schedule 28.07.2018
comment
Спасибо за помощь мне.   -  person James Kenneth Hunter    schedule 28.07.2018

Ответы (2)


arrow_upward
0
arrow_downward

Похоже, вы смешиваете дочерние маршруты и дополнительные (именованные) маршруты. Вы не определяете вспомогательные маршруты с помощью свойства children. См. Также этот пост: Дочерняя маршрутизация для Angular 5 не работает правильно

Что-то вроде этого:

{
  path: 'schedule-inspection',
  component: ScheduleInspectionComponent
 },
 {
  path: 'add',
  component: SidebarScheduleInspectionComponent,
  outlet: 'sidebar',
 },
person DeborahK    schedule 28.07.2018
comment
Спасибо за помощь. - person James Kenneth Hunter; 28.07.2018

arrow_upward
0
arrow_downward

В итоге мне пришлось сделать следующее, чего я не ожидал. Я надеялся / думал, что если бы вы могли определить путь для URL-адреса таким образом, чтобы он знал, как заполнить другие выходы маршрутизатора.

Working:

{ path: 'schedule-inspection-sidebar', component: ServiceAreaComponent, outlet:'sidebar' },
{
  path: 'schedule-inspection',
  component: ScheduleInspectionComponent
},
{
    path: 'schedule-inspection(sidebar:schedule-inspection-sidebar)',
    component: SidebarScheduleInspectionComponent,
    outlet: 'sidebar'
},

Затем в браузере перейдите к schedule-inspection(sidebar:schedule-inspection-sidebar), затем он будет искать путь с именем schedule-inspection-sidebar, а также отобразит основное содержимое. Если есть лучший способ сделать это, пожалуйста, дайте мне знать.

Я хотел иметь возможность перейти к /schedule-inspection, и, поскольку у него есть именованный маршрутизатор-выход, он сможет найти и отобразить этот контент на основе его определения. Конечный пользователь никогда не перейдет напрямую на боковую панель расписания-проверки.

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

person James Kenneth Hunter    schedule 28.07.2018