Как сделать заголовки страниц в Angular
Заголовок страницы — это фрагмент текста, который вы можете увидеть на вкладке браузера рядом со значком страницы. Установка хорошего заголовка страницы, улучшающего навигацию пользователя и SEO.
Статический метод
1. На основе компонентной сети
- Самый простой способ установить заголовок страницы в Angular — использовать сервис Title, предоставляемый
@angular/platform-browser. Этот сервис позволяет динамически задавать заголовок документа.
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-home',
templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
constructor(private titleService: Title) { }
ngOnInit(): void {
this.titleService.setTitle('Home - MyApp');
}
}Проблемы:
- Ограниченная масштабируемость: Использование статического подхода работает только для небольших приложений.
- Не централизовано: Этот метод не масштабируем и не централизован.
- Накладные расходы на обслуживание: Если вы измените способ отображения заголовка, потребуются изменения на уровне приложения.
2. На основе маршрута
Начиная с версии angular 14, мы можем легче обновлять заголовок страницы.
Angular предоставляет нам необязательное свойство title в определении маршрута.
const routes: Routes = [
{ path: 'home', component: HomeComponent, title: 'Home Page' }, // defined a title prop
];Однако передача статических строк — неудобный способ, и нам часто приходится создавать заголовок на основе некоторого динамического значения.
Динамический метод
Для динамических заголовков страниц у нас есть два варианта:
1. Уровень компонента
До Angular 14 вы можете динамически устанавливать заголовок в своих компонентах, используя сервис Title и подписываясь на маршрутизацию изменений данных. Этот метод предполагает написание собственной логики в каждом компоненте, которому требуется динамический заголовок.
Вот как вы можете это сделать:
- Внедрите
TitleиActivatedRouteсервисы - Подпишитесь на данные маршрута и установите заголовок
const routes: Routes = [
{ path: 'home', component: HomeComponent, data: {title: 'Home Page'} }, // defined a title prop
];import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { filter, map } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private titleService: Title, private router: Router) {}
ngOnInit() {
this.router.events
.pipe(
filter(event => event instanceof NavigationEnd),
map(() => {
let route: ActivatedRoute = this.router.routerState.root;
while (route.firstChild) {
route = route.firstChild;
}
return route.snapshot.data['title'];
})
)
.subscribe((title: string) => {
if (title) {
this.titleService.setTitle(`My App - ${title}`);
}
});
}
}Объяснение:
- Внедрение сервисов: Мы внедряем сервисы Title и Router.
- Подписка на события маршрутизатора: Мы подписываемся на событие NavigationEnd, чтобы определить завершение навигации.
- Получение данных маршрута: Мы проходим активированное дерево маршрутов, чтобы получить данные самого глубокого дочернего маршрута и извлечь свойство заголовка.
- Установка заголовка: Мы используем TitleService для установки заголовка документа.
Ключевые моменты:
- Расположение: Эта логика находится в корневом компоненте (AppComponent).
- События маршрутизации: Он прослушивает события маршрутизации (NavigationEnd) и обновляет заголовок на основе данных маршрута.
- Настройка заголовка: Заголовок устанавливается с помощью TitleService внутри компонента.
- Гибкость: Этот подход прост и понятен, но может стать громоздким, если вам нужно применить его к нескольким компонентам или маршрутам.
2. Пользовательская стратегия заголовков
Более масштабируемый подход — использовать собственную TitleStrategy. Это позволяет вам централизовать и стандартизировать настройку заголовков в вашем приложении. Вот как это можно реализовать:
Сначала создайте собственный класс TitleStrategy:
import { Injectable } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { TitleStrategy, RouterStateSnapshot } from '@angular/router';
@Injectable({
providedIn: 'root',
})
export class CustomTitleStrategy extends TitleStrategy {
constructor(private titleService: Title) {
super();
}
updateTitle(snapshot: RouterStateSnapshot): void {
const title = this.buildTitle(snapshot);
if (title !== undefined) {
this.titleService.setTitle(`My App - ${title}`);
}
}
}Далее настройте маршрутизатор для использования этой пользовательской стратегии:
bootstrapApplication(AppComponent, {
providers: [
provideRouter(routes),
{ provide: TitleStrategy, useClass: CustomTitleStrategy },
],
});
Ключевые моменты:
- Расположение: Логика обработки заголовков абстрагируется от компонентов и инкапсулируется в сервисе (CustomTitleStrategy).
- События маршрутизации: Автоматически подключаются к жизненному циклу маршрутизатора Angular.
- Настройка заголовка: Заголовок устанавливается с помощью TitleService в CustomTitleStrategy.
- Гибкость: Этот подход более модульный и допускает многократное использование. Он централизует логику управления заголовками, упрощая ее обслуживание и расширение.
3. Использование резольверов для установки заголовков страниц
В этом случае Angular позволяет нам передать преобразователь для динамического создания заголовка. Давайте создадим преобразователь названий для отображения названия продукта в качестве заголовка на странице сведений.
const productNameTitleResolver: ResolveFn<string> = (
route: ActivatedRouteSnapshot,
): string => {
const productId = route.paramMap.get('id');
return productId ? inject(ProductsService).getById(productId).name : '';
};
export const ROUTES: Routes = [
{
path: 'products',
component: ProductsComponent,
title: 'Products',
children: [
{
path: ':id',
component: ProductDetailsComponent,
title: productNameTitleResolver
},
],
},
{
path: 'cart',
component: CartSummaryComponent,
title: 'Cart Summary'
},
];Преобразователь заголовков можно использовать, как и любой другой преобразователь, позволяя вам вводить зависимости, выполнять некоторую логику или возвращать Observable, или Promise, которые возвращают строку заголовка страницы.
Заключение
Установка заголовков страниц в Angular может значительно улучшить пользовательский опыт и улучшить SEO. Для небольших приложений может быть достаточно использования сервиса Title в отдельных компонентах. Однако для более крупных приложений использование индивидуального варианта TitleStrategy обеспечивает масштабируемое и централизованное решение для управления заголовками страниц.
Понимая и реализуя эти методы, вы можете гарантировать, что ваше приложение Angular обеспечивает последовательный и динамичный просмотр для пользователей, а также воспользоваться преимуществами улучшенной поисковой оптимизации.
