У меня есть небольшой проект, он состоит из левого меню и центральной области, основная часть которой - это router-outlet, в которой отображаются копоненты и ниже этого аутлета располагается ламповый чатик. Так же отмечу, что я использую бутстрап.
Структура app.component.html следующая:
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-3'>
<app-nav-menu></app-nav-menu>
</div>
<div class='col-sm-9 body-content app-content'>
<router-outlet></router-outlet>
<app-chat-window class="chat"></app-chat-window>
</div>
</div>
</div>
Компоненты все довольно простые, есть список (обычно в него как раз переход из пункта левого меню) и так же можно отобразить детали сущности со стандартными функциями редактирования. То есть, прям стандартный crud со списком.
Вот, к примеру роутинг из модуля задач (issues)
const routes: Routes = [{
path: 'issue', children: [
{ path: 'list', component: ListComponent },
{ path: 'edit/:id', component: EditComponent },
]
}];
Обычное поведение пользователя: он открывает через левое меню, например, список задач (компонент ListComponent). Ему открывается табличное представление с урезанной информацией, далее пользователь нажимает кнопку "детали", после чего открывается другая страница с расширенной информацией (компонент EditComponent). Минус тут в том, что первая страница теряется, поэтому часто пользователи открывают детали задачи в новой вкладке браузера, но, так как это ангуляр, происходит заново загрузка всего проекта (ну или необходимых модулей, но это так же почти весь проект). И мне это не нравится. Альтернативой тут служит перенос детализированной информации, например, в попап. Тут даже можно сделать корректный роутинг. Но мне такой подход так же не нравится, не хочу загонять здоровую страницу в маленький попап ) Есть и другие минусы, не буду акцентировать.
Я хочу сделать следующее, реализовать аналог вкладок. То есть, на странице в рабочей области будут вкладки (ну как гугл хроме). В первую вкладку должен резолвиться компонент, который мы вызываем из левого меню. Пускай эта вкладка называется Main и её нельзя закрыть. А если мы переходим по ссылке детальной информации, то этот компонент должен отрисовываться в следующей вкладке.
Как пример я могу показать вкладки вот
отсюда.
Сложность заключается в структуре ангуляровского проекта. Вот если бы вёрстка страницы приходила с сервера, как раньше делали на jQuery и подобном, то вопросов бы у меня не было ) Но с ангуляром я встал просто в какой-то тупик, не знаю даже, как подступиться.
У нас есть один роутер аутлет, чтоб его. И именно в него грузится первый компонент и не надо его перезаписывать и отображать другие данные в нём, то есть, при закрытии второй вкладки, у нас останется одна первая, в которой уже загружены данные. Два роутер-аутлета добавить нельзя, насколько я понимаю, да и это будет криво в любом случае.
Средний
Средний