1

Необходимо реализовать интерфейс след. образом: Есть главная страница, страница 404, и ряд страниц личного кабинета. В личном кабинете слева есть сайдбар. Нужно чтобы сайдбар отображался только на страницах личного кабинета, а на внешних его не было. При этом сайдбар должен быть статичным(т. е. вставлять его на каждую страницу личного кабинета -- не подходит), нужно чтобы менялся только контент рядом с сайдбаром. Не могу сообразить как это сделать...

1 ответ 1

2

Можно роуты личного кабинета сделать дочерними для роута, который использует компонент-лейаут, а в этом компоненте уже разместить сайдбар, хедер и всё, что нужно. Содержимое дочерних роутов в лейауте вывести через <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, в котором есть необходимые элементы.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.