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를 제공합니다.