Angular의 동적 탭 제목

Angular 14를 사용하면 이제 동적 탭 제목을 쉽게 생성할 수 있습니다.

1. 경로의 제목 속성

사용 사례:

탭 이름으로 사용자가 있는 사용자 페이지.(사용자)

주문이 탭 이름(주문)인 주문 페이지

그런 다음 아래와 같이 Routes에서 제목 속성을 사용하십시오.

암호

export const APP_ROUTES: Routes = [
  {path: '/users', component: UsersComponent, title: 'Users'},
  {path: '/orders', component: OrdersComponent, title: 'Orders'}
];

2. Resolve가 포함된 제목

사용 사례:

탭 이름에 현재 사용자 이름이 있는 사용자 페이지(User-Bharath)

탭 이름에 주문 ID가 있는 주문 페이지(주문 ID:1)

그런 다음 아래와 같이 Router 모듈에서 Resolve 클래스를 구현하는 서비스를 만들어야 합니다.

암호:

@Injectable({
  providedIn: "root"
})
export class CustomTitleResolver implements Resolve<string> {

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> | Promise<string> | string {
// Have fun with naming
    return "<<project-name>> -" + route.paramMap.get("id") || "";
  }
}

제목 속성으로 경로 업데이트

export const APP_ROUTES: Routes = [
  {path: '/users/:id', component: UsersComponent, title: CustomTitleResolver },
  {path: '/orders/:id', component: OrdersComponent, title: CustomTitleResolver }
];

3. 타이틀 전략

사용 사례:

보다 일반화된 패턴을 원하면 애플리케이션 전체에 적용됩니다.

탭 제목에 텍스트 접두어 추가(Project X 사용자)

탭 제목에 텍스트를 추가합니다.(사용자 프로젝트 X )

그런 다음 확장되는 서비스TitleStrategy를 생성하고 AppModule에서 공급자로 추가합니다.

암호

@Injectable({
  providedIn: "root"
})
export class CustomTitleStrategy extends TitleStrategy  {
  constructor(private readonly title: Title) {
    super();
  }

  override updateTitle(routerState: RouterStateSnapshot): void {
    const title = this.buildTitle(routerState);
    if (title !== undefined) {
      this.title.setTitle(`myImpact (${title})`);
    } else {
      this.title.setTitle('myImpact');
    }
  }
}

Naming Strategy는 앱 모듈에 제공자로 추가되어야 합니다. 그래야 angular가 대체 Naming 전략을 제공했음을 알 수 있습니다.

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

메모

사용 사례에 따라 이러한 방법 중 하나를 사용할 수 있으며 나처럼 Resolve 및 명명 전략을 혼합할 수도 있습니다.



행복한 코딩 👨‍💻 !!