Когда мы создаем веб-приложение, мы часто упускаем из виду заголовок страницы. Пользователь видит заголовок страницы на вкладке браузера, и это помогает ему перемещаться по приложению.
Некоторые причины использования определенных заголовков страниц – показать пользователям, на какой странице они находятся в приложении, и помочь им при создании закладок конкретная страница.
Изменить заголовок страницы с помощью сервиса Title
Angular предоставляет нам службу Title, и мы можем использовать эту службу, чтобы изменить заголовок страницы на что-то значимое для наших пользователей.
Служба заголовков имеет два метода, которые мы можем использовать:
getTitle(){} — получение заголовка текущего HTML-документа
setTitle(){} -Установить заголовок текущего HTML-документа
Посмотрим, что в действии 😃
В приведенном выше примере мы определили свойство title внутри данных маршрута для каждого маршрута, а в классе компонента приложения мы прослушиваем событие маршрутизатора.
Мы использовали метод setTitle из сервиса Title, когда переходили на определенную страницу, чтобы обновить заголовок приложения.
Обновите заголовок страницы с помощью Angular V14+ 🚀
Начиная с версии angular 14, мы можем более легко обновлять заголовок страницы.
Angular предоставляет нам необязательное свойство title в определении маршрута.
Как мы видели в приведенном выше коде, мы можем изменить заголовок страницы, установив жестко заданную строку или используя класс преобразователя для более динамичных заголовков страниц.
Предположим, мы хотим, чтобы префикс приложения отображался во всех заголовках страниц. В этом случае нам нужно создать класс, который реализует абстрактную TitleStrategy, изменить наш текст префикса и подписать класс, который мы создали в системе DI (внедрения зависимостей).
Давайте посмотрим, что это в действии.
В приведенном выше коде мы видим, что вместо использования углового провайдера TitleStrategy мы используем наш класс AppTitlePrefix, который расширяет абстрактный класс TitleStrategy, и добавляем к заголовку префикс App.
Спасибо, что прочитали эту статью, и я надеюсь, что она была полезна для всех вас 😀
