From 0dfd7c0d5c5a5431caaa30cc2dcd94f381130258 Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Tue, 8 Jul 2025 10:46:31 +0300 Subject: [PATCH] refactor : migrate theme-basic package to inject() DI --- .../account-layout.component.ts | 6 +-- .../auth-wrapper/auth-wrapper.component.ts | 28 ++++++------ .../tenant-box/tenant-box.component.ts | 44 +++++++++---------- .../src/lib/components/logo/logo.component.ts | 6 +-- .../nav-items/current-user.component.ts | 16 +++---- .../nav-items/languages.component.ts | 10 ++--- .../nav-items/nav-items.component.ts | 6 +-- .../page-alert-container.component.ts | 26 +++++------ .../src/lib/handlers/lazy-style.handler.ts | 6 ++- .../src/lib/services/layout.service.ts | 12 +++-- 10 files changed, 81 insertions(+), 79 deletions(-) diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts index e5b68e8901..4a19cc7212 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component } from '@angular/core'; +import { AfterViewInit, Component, inject } from '@angular/core'; import { eLayoutType, ReplaceableTemplateDirective, SubscriptionService } from '@abp/ng.core'; import { LayoutService } from '../../services/layout.service'; import { CommonModule } from '@angular/common'; @@ -25,13 +25,13 @@ import { RouterModule } from '@angular/router'; ], }) export class AccountLayoutComponent implements AfterViewInit { + service = inject(LayoutService); + // required for dynamic component static type = eLayoutType.account; authWrapperKey = 'Account.AuthWrapperComponent'; - constructor(public service: LayoutService) {} - ngAfterViewInit() { this.service.subscribeWindowSize(); } diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts index 5094551ed2..3c2db0a33b 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts @@ -1,15 +1,15 @@ -import { AuthWrapperService } from '@abp/ng.account.core'; -import { Component } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core'; -import { TenantBoxComponent } from '../tenant-box/tenant-box.component'; +import { AuthWrapperService } from '@abp/ng.account.core'; +import { Component, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core'; +import { TenantBoxComponent } from '../tenant-box/tenant-box.component'; + +@Component({ + selector: 'abp-auth-wrapper', + templateUrl: './auth-wrapper.component.html', + providers: [AuthWrapperService], + imports: [CommonModule, TenantBoxComponent, ReplaceableTemplateDirective, LocalizationPipe], +}) +export class AuthWrapperComponent { service = inject(AuthWrapperService); -@Component({ - selector: 'abp-auth-wrapper', - templateUrl: './auth-wrapper.component.html', - providers: [AuthWrapperService], - imports: [CommonModule, TenantBoxComponent, ReplaceableTemplateDirective, LocalizationPipe], -}) -export class AuthWrapperComponent { - constructor(public service: AuthWrapperService) {} -} +} diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts index 4aadd1effb..af4807d2bb 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts @@ -1,23 +1,23 @@ -import { TenantBoxService } from '@abp/ng.account.core'; -import { Component } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { LocalizationPipe } from '@abp/ng.core'; -import { ButtonComponent, ModalCloseDirective, ModalComponent } from '@abp/ng.theme.shared'; -import { FormsModule } from '@angular/forms'; +import { TenantBoxService } from '@abp/ng.account.core'; +import { Component, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { LocalizationPipe } from '@abp/ng.core'; +import { ButtonComponent, ModalCloseDirective, ModalComponent } from '@abp/ng.theme.shared'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'abp-tenant-box', + templateUrl: './tenant-box.component.html', + providers: [TenantBoxService], + imports: [ + CommonModule, + FormsModule, + ModalComponent, + LocalizationPipe, + ButtonComponent, + ModalCloseDirective, + ], +}) +export class TenantBoxComponent { service = inject(TenantBoxService); -@Component({ - selector: 'abp-tenant-box', - templateUrl: './tenant-box.component.html', - providers: [TenantBoxService], - imports: [ - CommonModule, - FormsModule, - ModalComponent, - LocalizationPipe, - ButtonComponent, - ModalCloseDirective, - ], -}) -export class TenantBoxComponent { - constructor(public service: TenantBoxService) {} -} +} diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts index fcaeacdf1a..b3047d72ed 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts @@ -1,5 +1,5 @@ import { ApplicationInfo, EnvironmentService } from '@abp/ng.core'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ @@ -16,9 +16,9 @@ import { CommonModule } from '@angular/common'; imports: [CommonModule], }) export class LogoComponent { + private environment = inject(EnvironmentService); + get appInfo(): ApplicationInfo { return this.environment.getEnvironment().application; } - - constructor(private environment: EnvironmentService) {} } diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts index 40f2d4a342..de9ef1f3f0 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts @@ -9,7 +9,7 @@ import { ToInjectorPipe, } from '@abp/ng.core'; import { AbpVisibleDirective, UserMenu, UserMenuService } from '@abp/ng.theme.shared'; -import { Component, Inject, TrackByFunction } from '@angular/core'; +import { Component, TrackByFunction, inject } from '@angular/core'; import { Observable } from 'rxjs'; import { CommonModule } from '@angular/common'; import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; @@ -27,6 +27,12 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; ], }) export class CurrentUserComponent { + readonly navigateToManageProfile = inject(NAVIGATE_TO_MANAGE_PROFILE); + readonly userMenu = inject(UserMenuService); + private authService = inject(AuthService); + private configState = inject(ConfigStateService); + private sessionState = inject(SessionStateService); + currentUser$: Observable = this.configState.getOne$('currentUser'); selectedTenant$ = this.sessionState.getTenant$(); @@ -36,14 +42,6 @@ export class CurrentUserComponent { return window.innerWidth < 992; } - constructor( - @Inject(NAVIGATE_TO_MANAGE_PROFILE) public readonly navigateToManageProfile: () => void, - public readonly userMenu: UserMenuService, - private authService: AuthService, - private configState: ConfigStateService, - private sessionState: SessionStateService, - ) {} - navigateToLogin() { this.authService.navigateToLogin(); } diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts index 67d09d300b..0a7b3e8190 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts @@ -1,5 +1,5 @@ import { ConfigStateService, LanguageInfo, SessionStateService } from '@abp/ng.core'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { CommonModule } from '@angular/common'; @@ -42,6 +42,9 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; imports: [CommonModule, NgbDropdownModule], }) export class LanguagesComponent { + private sessionState = inject(SessionStateService); + private configState = inject(ConfigStateService); + get smallScreen(): boolean { return window.innerWidth < 992; } @@ -69,11 +72,6 @@ export class LanguagesComponent { return this.sessionState.getLanguage(); } - constructor( - private sessionState: SessionStateService, - private configState: ConfigStateService, - ) {} - onChangeLang(cultureName: string) { this.sessionState.setLanguage(cultureName); } diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts index d2e4a516b4..15b359f929 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts @@ -1,5 +1,5 @@ import { AbpVisibleDirective, NavItem, NavItemsService } from '@abp/ng.theme.shared'; -import { Component, TrackByFunction } from '@angular/core'; +import { Component, TrackByFunction, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { PermissionDirective, ToInjectorPipe } from '@abp/ng.core'; @@ -9,7 +9,7 @@ import { PermissionDirective, ToInjectorPipe } from '@abp/ng.core'; imports: [CommonModule, AbpVisibleDirective, PermissionDirective, ToInjectorPipe], }) export class NavItemsComponent { - trackByFn: TrackByFunction = (_, element) => element.id; + readonly navItems = inject(NavItemsService); - constructor(public readonly navItems: NavItemsService) {} + trackByFn: TrackByFunction = (_, element) => element.id; } diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts index b28cd6c81b..9347850b53 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts @@ -1,14 +1,14 @@ -import { Component, ViewEncapsulation } from '@angular/core'; -import { PageAlertService } from '@abp/ng.theme.shared'; -import { CommonModule } from '@angular/common'; -import { LocalizationPipe, SafeHtmlPipe } from '@abp/ng.core'; +import { Component, ViewEncapsulation, inject } from '@angular/core'; +import { PageAlertService } from '@abp/ng.theme.shared'; +import { CommonModule } from '@angular/common'; +import { LocalizationPipe, SafeHtmlPipe } from '@abp/ng.core'; + +@Component({ + selector: 'abp-page-alert-container', + templateUrl: './page-alert-container.component.html', + encapsulation: ViewEncapsulation.None, + imports: [CommonModule, LocalizationPipe, SafeHtmlPipe], +}) +export class PageAlertContainerComponent { service = inject(PageAlertService); -@Component({ - selector: 'abp-page-alert-container', - templateUrl: './page-alert-container.component.html', - encapsulation: ViewEncapsulation.None, - imports: [CommonModule, LocalizationPipe, SafeHtmlPipe], -}) -export class PageAlertContainerComponent { - constructor(public service: PageAlertService) {} -} +} diff --git a/npm/ng-packs/packages/theme-basic/src/lib/handlers/lazy-style.handler.ts b/npm/ng-packs/packages/theme-basic/src/lib/handlers/lazy-style.handler.ts index 02d9f69817..cd801b40f7 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/handlers/lazy-style.handler.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/handlers/lazy-style.handler.ts @@ -1,6 +1,6 @@ import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core'; import { DocumentDirHandlerService, LocaleDirection } from '@abp/ng.theme.shared'; -import { Injectable, Injector } from '@angular/core'; +import { Injectable, Injector, inject } from '@angular/core'; import { LAZY_STYLES } from '../tokens/lazy-styles.token'; export const BOOTSTRAP = 'bootstrap-{{dir}}.min.css'; @@ -23,7 +23,9 @@ export class LazyStyleHandler { return this._dir; } - constructor(injector: Injector) { + constructor() { + const injector = inject(Injector); + this.setStyles(injector); this.setLazyLoad(injector); this.listenToDirectionChanges(injector); diff --git a/npm/ng-packs/packages/theme-basic/src/lib/services/layout.service.ts b/npm/ng-packs/packages/theme-basic/src/lib/services/layout.service.ts index a990173218..0f8a535fe5 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/services/layout.service.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/services/layout.service.ts @@ -1,11 +1,14 @@ import {RouterEvents, SubscriptionService} from '@abp/ng.core'; -import { ChangeDetectorRef, Injectable } from '@angular/core'; +import { ChangeDetectorRef, Injectable, inject } from '@angular/core'; import { fromEvent } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; import { eThemeBasicComponents } from '../enums'; @Injectable() export class LayoutService { + private subscription = inject(SubscriptionService); + private cdRef = inject(ChangeDetectorRef); + isCollapsed = true; smallScreen!: boolean; // do not set true or false @@ -16,9 +19,10 @@ export class LayoutService { navItemsComponentKey = eThemeBasicComponents.NavItems; - constructor(private subscription: SubscriptionService, - private cdRef: ChangeDetectorRef, - routerEvents:RouterEvents) { + constructor() { + const subscription = this.subscription; + const routerEvents = inject(RouterEvents); + subscription.addOne(routerEvents.getNavigationEvents("End"),() => { this.isCollapsed = true; })