Угловой вопрос о маршрутизации - 2 отверстия для пончиков

Question

Я рассматриваю шаблон проекта в угловом формате

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

<div class="main-wrapper">
    <app-header></app-header>
    <app-sidebar></app-sidebar>


    <router-outlet></router-outlet>
    <div class="task-overlay" data-reff="#task_window"></div>
    <div class="sidebar-overlay" data-reff="#sidebar"></div>


</div>

Боковая панель - это, как и ожидалось, меню, и есть маршруты, которые выглядят так (просто выдержка ..)

{ path: 'events', component: EventsmainComponent },
  { path: 'chat', component: ChatsComponent },
  { path: 'activities', component: ActivitiesComponent },
  { path: 'inbox', component: EmailmainComponent },

Эти компоненты имеют селектор, который не найден ни в одномHTML-шаблон во всем проекте (app-email).Я полагаю, что angular - это «говорящий»

" Когда URL-адрес \ inbox, я собираюсь взять EmailMainComponent и вставить его в тег-заполнитель ROUTER-OUTLET "

Здесь мое понимание останавливается.

1.Я не вижу Router-Outlet, упомянутый в маршрутизации?Является ли Router-Outlet зарезервированным тегом?

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

Answer 1

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

RouterOutlet - это директива из библиотеки маршрутизатора, которая используется как компонент.Он действует как заполнитель, который отмечает место в шаблоне, где маршрутизатор должен отображать компоненты для этой розетки.

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

<!-- This is the placeholder for component of the first part of the screen -->
<router-outlet name="first">   

...
<!-- This is the placeholder for component of the second part of the screen -->
<router-outlet name="second">

и ссылки на них в конфигурациях маршрутов следующим образом:

...
{path: '/yourPath', component: YourComponent, outlet: 'first'},
{path: '/yourPath', component: OtherComponent, outlet: 'second'}
...

Поэтому, если вы перейдете по URL-адресу /yourPath, вы увидите YourComponent в первом поле и OtherComponent во второмкоробка