Banx. Гибкие шаблоны с routerOutlet в Angular

В данной статье рассмотрим принцип создания лейаута с помощью стандартных средств Angular Router.

Пример базового макета, где некоторые части которого появляются на определенных страницах или отображаются при определенных условиях.

Разберем принципы создания макетов с использованием Angular Router.

Принцип работы роутера в Angular — это сопоставление модулей или компонентов с соответствующими аутлетами, которых может быть больше одного.

Обычно, для создания лейаута в приложении создается компонент, в котором определяются шапка, контент и подвал:

Реализация будет следующей:

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

Для того, чтобы Angular смог использовать данный компонент для вывода, добавим router-outlet:

<header>Header</header>
<main>
  <router-outlet></router-outlet>
</main>
<footer>Footer</footer>

Теперь можно использовать макет:

Несколько outlet’ов

Для более сложных макетов можно использовать несколько outlet’ов. Принцип работы заключается в следующем:

• Создаются новые outlet’ы с уникальными именами
• При добавлении компонентов в маршрутизацию, в качестве места вывода выбирается именованный аутлет.

Например, есть меню с вложенными меню. И в зависимости от некой логики, определенные части макета в зависимости от отображаемой страницы могут то показываться, то скрываться.

Можно посмотреть на сайт tinkoff, где на главной странице есть дополнительный блок в футоре, а второй уровень меню отображается везде, кроме главной страницы.

Данная функциональность в Angular реализуется следующим образом.

В макете создаются новые именованные outlet’ы:

В данном случае, были добавлены следующие аутлеты:

• header-toolbar и header-top в шапке
• главный outlet оставили без изменений
• в футоре создали 4 новых аутлета: footer-top, footer-menu, footer-info и footer-bottom.

Подключим макет в приложение:

Для того, чтобы на главной странице вывести блок в футоре, добавим компонент в соответствующий outlet:

В частности:

{
  path: '',
  outlet: 'footer-info',
  component: HomeInfoComponent,
},

Получим что-то вида на главной странице:

На всех остальных страницах будем иметь:

Аналогично с подменю в шапке. Для того, чтобы вывести подменю, просто выведем в соответствующий аутлет компонент:

В данном случае, был добавлен компонент:

{
  path: '',
  component: TopMenuComponent,
  outlet: 'header-top',
  data: {
    parent: NAVIGATION_PATHS.bank,
    active: NAVIGATION_PATHS.bankCreditCards,
  },
},

Соответственно на странице получим следующее:

Резюме

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

Ссылки

Вернуться к оглавлению — Введение.

Предыдущая статья — Banx. Создание API NestJS + TypeOrm + Mariadb.

Следующая статья — Banx. Создание страницы авторизации и сброса пароля.

Все исходники находятся на github, в репозитории:

GitHub — Fafnur/banx: Angular enterprise application development course

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — layouts.

git checkout layouts

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, веб-разработку и новости из мира фронтенда.

Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
Instagram: https://www.instagram.com/fafnur
LinkedIn: https://www.linkedin.com/in/fafnur