Заголовок страницы – это текст, который отображается на вкладке браузера рядом с иконкой сайта (favicon). Установка правильного заголовка страницы улучшает навигацию пользователя и оптимизацию для поисковых систем (SEO).
Статический метод
Компонентный подход
Самый простой способ задать заголовок страницы в Angular — это использовать сервис Title, предоставляемый пакетом @angular/platform-browser. Этот сервис позволяет динамически устанавливать заголовок документа.
Проблемы:
- Ограниченная масштабируемость: Этот статический подход подходит только для небольших приложений.
- Не централизовано: Метод не масштабируется и не является централизованным.
- Сложность поддержки: Если требуется изменить способ отображения заголовка, нужно будет вносить изменения на уровне всего приложения.
Заголовок на основе маршрута
Начиная с версии Angular 14, стало проще обновлять заголовок страницы. В Angular появилась опция использовать свойство title в определении маршрута.
Однако передача статических строк не всегда удобна, и часто возникает необходимость создавать заголовок на основе динамических значений.
Динамический метод
Для динамических заголовков страниц у нас есть два варианта:
На уровне компонента
Для версий Angular ниже 14, вы можете динамически задавать заголовок внутри компонентов, используя сервис Title и подписываясь на изменения данных маршрута. Этот метод требует написания индивидуальной логики в каждом компоненте, где необходим динамический заголовок.
Как это сделать:
- Внедрите сервисы Title и ActivatedRoute.
- Подпишитесь на данные маршрута и установите заголовок.
Пояснение:
- Внедрение сервисов: Мы внедряем сервисы Title и Router.
- Подписка на события маршрута: Мы подписываемся на событие NavigationEnd, чтобы обнаружить завершение навигации.
- Получение данных маршрута: Мы проходим по дереву активных маршрутов, чтобы получить данные самого глубокого дочернего маршрута и извлечь свойство title.
- Установка заголовка: Мы используем TitleService, чтобы установить заголовок документа.
Ключевые моменты:
- Расположение: Эта логика находится в корневом компоненте (AppComponent).
- События маршрутизации: Она отслеживает события маршрутизации (NavigationEnd) и обновляет заголовок на основе данных маршрута.
- Установка заголовка: Заголовок устанавливается с помощью TitleService в компоненте.
- Гибкость: Этот подход прост и понятен, но может стать обременительным, если его нужно применять в нескольких компонентах или маршрутах.
Пользовательская TitleStrategy
Более масштабируемым подходом является использование пользовательской TitleStrategy. Это позволяет централизовать и стандартизировать способ установки заголовков по всему приложению.
Создание пользовательской стратегии заголовков:
Сначала создайте класс (сервис) пользовательской TitleStrategy.
Затем настройте роутер на использование этой пользовательской стратегии.
Ключевые моменты:
- Расположение: Логика обработки заголовков вынесена из компонентов и инкапсулирована в сервисе (CustomTitleStrategy).
- События маршрутизации: Она автоматически подключается к жизненному циклу роутера Angular.
- Установка заголовка: Заголовок устанавливается с помощью TitleService внутри CustomTitleStrategy.
- Гибкость: Этот подход более модульный и переиспользуемый. Он централизует логику управления заголовками, что упрощает поддержку и расширение приложения.
Использование Resolvers для установки заголовков страницы
В этом случае Angular позволяет нам передать resolver, чтобы динамически создавать заголовок. Давайте создадим title resolver, чтобы отображать название продукта в качестве заголовка на странице с его детальной информацией.
Title resolver может использоваться как любой другой resolver, позволяя вам внедрять зависимости, выполнять некоторую логику или возвращать Observable || Promise, который возвращает строку заголовка страницы.
Заключение
Установка заголовков страниц в Angular может значительно улучшить пользовательский опыт и SEO. Для небольших приложений использование Title сервиса в отдельных компонентах может быть достаточно. Однако для крупных приложений использование пользовательской TitleStrategy предоставляет масштабируемое и централизованное решение для управления заголовками страниц.
Понимая и применяя эти техники, вы сможете обеспечить консистентный и динамичный опыт использования вашего Angular приложения, а также улучшить его поисковую оптимизацию.
К тому же, я узнал новый паттерн проектирования — Strategy Pattern, работая над CustomTitleStrategy. В следующей статье я планирую рассмотреть этот паттерн более подробно.
Перевод статьи от Priya jain