Как задать заголовок страницы в angular 14

В новой версии angular 14 была добавлена новая классная функция, которая позволяет легко установить заголовок страницы на основе текущего маршрута, который отображается.

Интерфейс Route был расширен новым свойством title.

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

Пример:

export const routes: Routes = [
  {
    path: 'hello',
    title: 'Hello!',
    ...
  }
]

С помощью резольвера:

@Injectable({ providedIn: 'root' })
class HelloTitleResolver implements Resolve<string> {
  constructor(private randomEmoji: RandomEmojiService) { }

  resolve(route: ActivatedRouteSnapshot) {
    return this.randomEmoji.emoji().pipe(
      map(e => `Hello ${e}!`)
    );
  }
}

export const routes: Routes = [
  {
    path: 'hello',
    title: HelloTitleResolver,
    ...
  }
]

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