NgRx 선택기에서 🧨 동적 제목을 사용하는 방법

Angular 14가 출시되고 , "선택기에서 페이지 제목을 어떻게 동적으로 설정할 수 있습니까?"

이를 위해 API를 홍보하기 위해 an RFC in the NgRx community을 작성했습니다. 이것이 어떻게 작동하는지, 그리고 오늘 그것을 어떻게 활용할 수 있는지(@ngrx/* 패키지에 합류하는지 여부에 관계없이) 설명하고 싶습니다.

동적 제목 구성의 예

다음 예제에 대한 모든 코드는 이 StackBlitz demo에서 찾을 수 있습니다.

입력에 "작업"의 이름을 입력한 다음 "작업 수행"버튼을 클릭하여 "실행"할 수 있는 웹 사이트가 있다고 가정해 보겠습니다.



"작업 수행"을 클릭하면 내 페이지 제목에 "작업"이 완료된 후 몇 초가 경과했는지 반영됩니다.



내 Angular 앱 경로에는 선택기를 문자열로 인라인할 수 있는 태그 함수ngrxTitle를 사용하여 구성된 페이지 경로가 있습니다.

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    title: ngrxTitle`${counterFeature.selectCount} Seconds Since ${counterFeature.selectEvent}`,
  },
];

선택기counterFeature.selectCount는 버튼을 클릭한 이후의 시간(초)을 선택하는 반면, counterFeature.selectEvent는 버튼을 클릭했을 때 입력에 입력된 작업의 이름을 선택합니다. ngrxTitle 를 사용하여 이와 같은 다중 선택기의 최신 결과를 포함하도록 제목을 템플릿화할 수 있습니다.

ngrxTitle 구현

ngrxTitle는 선택기로 템플릿 리터럴을 처리하는 tag function입니다.

모든 선택자에 대해 고유 ID를 생성하고 선택자를 문자열 'NgRxTitleSelector${ID}' 로 바꿉니다.

예를 들어, 내 앱을 실행했을 때 제목 템플릿 리터럴이 'NgRxTitleSelector${f35ace1e-28d8-4dc6-850a-f0900315ca8a} Seconds Since NgRxTitleSelector${40b2582b-832a-44f5-b6ce-f650518db278}' 문자열로 생성되었습니다.

Angular 14를 사용하면 개발자가 사용자 지정 "제목 전략"을 구현할 수 있습니다. ATitleStrategy는 경로가 변경될 때마다 호출되는 updateTitle 메서드가 있는 클래스입니다. 이렇게 하면 원하는 방식으로 제목을 변경할 수 있습니다.

즉, ngrxTitle에서 생성된 제목 템플릿을 처리하고 템플릿에서 참조하는 선택기를 구독하여 새 제목을 생성할 수 있습니다.
NgRxTitleStrategy는 다음 기본 구조로 시작합니다.

export class NgRxTitleStrategy extends TitleStrategy {

  private titleSubscription: Subscription | undefined;

  updateTitle(snapshot: RouterStateSnapshot): void {
    // Each time the route changes, cancel the last subscription
    this.titleSubscription?.unsubscribe();

    // Get the title using the base method
    // When using ngrxTitle, this will be the special template string
    const titleTemplate = this.buildTitle(snapshot);
    // Create an Observable of the title built from the template
    const title$ = this.selectTitleFromTemplate(titleTemplate);
    // Continuously update the title as the selectors emit new values
    this.titleSubscription = title$.subscribe((t) => this.title.setTitle(t));
  }
}

앱 모듈에서 providers의 새로운 제목 전략을 활용할 수 있습니다.

@NgModule({
  declarations: [AppComponent],
  providers: [{
    provide: TitleStrategy,
    useClass: NgRxTitleStrategy,
  }],
  imports: [
    /* ... */
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

전체 구현

전체 구현에 대해서는 아래 요점을 참조하십시오.