Необходимо реализовать интерфейс след. образом: Есть главная страница, страница 404, и ряд страниц личного кабинета. В личном кабинете слева есть сайдбар. Нужно чтобы сайдбар отображался только на страницах личного кабинета, а на внешних его не было. При этом сайдбар должен быть статичным(т. е. вставлять его на каждую страницу личного кабинета -- не подходит), нужно чтобы менялся только контент рядом с сайдбаром. Не могу сообразить как это сделать...
1 ответ
Можно роуты личного кабинета сделать дочерними для роута, который использует компонент-лейаут, а в этом компоненте уже разместить сайдбар, хедер и всё, что нужно. Содержимое дочерних роутов в лейауте вывести через <router-outlet></router-outlet>
.
Пример разметки лейаута:
<div class="layout">
<header></header>
<aside class="layout__sidebar"></aside>
<main role="main" class="layout__container">
<router-outlet></router-outlet>
</main>
</div>
Пример организации роутинга:
const routes: Routes = [
{ path: 'ext', component: ExtComponent },
{
path: '', component: LayoutComponent, children: [
{ path: 'int', component: IntComponent },
]
},
];
Таким образом ExtComponent
имеет свою независимую разметку, а IntComponent
выводится внутри LayoutComponent
, в котором есть необходимые элементы.