Как задать название страницы в маршрутах Angular?

В Angular можно задать название страницы в маршрутах с помощью механизма метаданных. Метаданные относятся к каждому маршруту и содержат информацию, связанную с его конфигурацией. Одним из свойств метаданных является свойство "title", которое позволяет задать название страницы.

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

1. В первую очередь, откройте файл app-routing.module.ts в вашем проекте. Этот файл отвечает за настройку маршрутов приложения.

2. Объявите необходимые модули:

   import { Title } from '@angular/platform-browser';
   import { Router, NavigationEnd } from '@angular/router';
   import { filter, map, mergeMap } from 'rxjs/operators';

3. Внедрите зависимости в конструктор вашего компонента:

   constructor(private router: Router, private titleService: Title) {}

4. Создайте метод, который будет обновлять название страницы:

   setTitle(title: string) {
     this.titleService.setTitle(title);
   }

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

   ngOnInit() {
     this.router.events
       .pipe(
         filter((event) => event instanceof NavigationEnd),
         map(() => this.router.routerState.root),
         map((root) => {
           while (root.firstChild) {
             root = root.firstChild;
           }
           return root;
         }),
         mergeMap((root) => root.data)
       )
       .subscribe((event) => {
         this.setTitle(event['title']);
       });
   }

6. Теперь в каждом маршруте, который вы хотите назвать, добавьте свойство "data" в конфигурации маршрута:

   { path: 'home', component: HomeComponent, data: { title: 'Домашняя страница' } },
   { path: 'about', component: AboutComponent, data: { title: 'О нас' } },

Здесь 'title' - это свойство метаданных, которое будет использоваться для установки названия страницы.

Теперь, когда вы переходите по разным маршрутам в вашем приложении Angular, название страницы будет обновляться соответствующим образом. Обратите внимание, что это решение позволяет гибко настраивать названия страниц для каждого маршрута, что очень полезно для SEO и пользовательского опыта.