From dc4d227e7ebd67c69b99caf5adf69995cdc222ed Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Tue, 8 Jul 2025 10:23:35 +0300 Subject: [PATCH] refactor : migrate components package to inject() DI --- .../chart.js/src/chart.component.ts | 35 ++++++++-------- .../abstract-actions.component.ts | 6 ++- .../grid-actions/grid-actions.component.ts | 19 +++++---- .../page-toolbar/page-toolbar.component.ts | 10 ++++- .../src/lib/directives/prop-data.directive.ts | 28 +++++++------ .../page/src/page-part.directive.ts | 41 +++++++++---------- .../expanded-icon-template.directive.ts | 14 +++---- .../templates/tree-node-template.directive.ts | 14 +++---- 8 files changed, 88 insertions(+), 79 deletions(-) diff --git a/npm/ng-packs/packages/components/chart.js/src/chart.component.ts b/npm/ng-packs/packages/components/chart.js/src/chart.component.ts index c700a0bce8..9ab84aedcd 100644 --- a/npm/ng-packs/packages/components/chart.js/src/chart.component.ts +++ b/npm/ng-packs/packages/components/chart.js/src/chart.component.ts @@ -1,16 +1,17 @@ -import { - AfterViewInit, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - EventEmitter, - Input, - OnChanges, - OnDestroy, - Output, - SimpleChanges, - ViewChild, +import { + AfterViewInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + Input, + OnChanges, + OnDestroy, + Output, + SimpleChanges, + ViewChild, + inject } from '@angular/core'; let Chart: any; @@ -35,6 +36,9 @@ let Chart: any; exportAs: 'abpChart', }) export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges { + el = inject(ElementRef); + private cdr = inject(ChangeDetectorRef); + @Input() type!: string; @Input() data: any = {}; @@ -57,11 +61,6 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges { chart: any; - constructor( - public el: ElementRef, - private cdr: ChangeDetectorRef, - ) {} - ngAfterViewInit() { import('chart.js/auto').then(module => { Chart = module.default; diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/abstract-actions/abstract-actions.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/abstract-actions/abstract-actions.component.ts index 394e125798..465a18b813 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/abstract-actions/abstract-actions.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/abstract-actions/abstract-actions.component.ts @@ -1,4 +1,4 @@ -import { Directive, Injector, Input } from '@angular/core'; +import { Directive, Injector, Input, inject } from '@angular/core'; import { ActionData, ActionList, InferredAction } from '../../models/actions'; import { ExtensionsService } from '../../services/extensions.service'; import { EXTENSIONS_ACTION_TYPE, EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token'; @@ -16,7 +16,9 @@ export abstract class AbstractActionsComponent< @Input() record!: InferredData['record']; - protected constructor(injector: Injector) { + protected constructor() { + const injector = inject(Injector); + super(); this.getInjected = injector.get.bind(injector); const extensions = injector.get(ExtensionsService); diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts index 5307a4a671..87e889cdb3 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts @@ -1,9 +1,10 @@ -import { - ChangeDetectionStrategy, - Component, - Injector, - Input, - TrackByFunction, +import { + ChangeDetectionStrategy, + Component, + Injector, + Input, + TrackByFunction, + inject } from '@angular/core'; import { EntityAction, EntityActionList } from '../../models/entity-actions'; import { EXTENSIONS_ACTION_TYPE } from '../../tokens/extensions.token'; @@ -43,7 +44,9 @@ export class GridActionsComponent extends AbstractActionsComponent> = (_, item) => item.text; - constructor(injector: Injector) { - super(injector); + constructor() { + const injector = inject(Injector); + + super(); } } diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.ts index 7492b6f94e..f21b0d4378 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, Injector, TrackByFunction } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Injector, TrackByFunction, inject } from '@angular/core'; import { HasCreateInjectorPipe, ToolbarAction, @@ -35,6 +35,8 @@ export class PageToolbarComponent extends AbstractActionsComponent> implements HasCreateInjectorPipe { + readonly injector: Injector; + defaultBtnClass = 'btn btn-sm btn-primary'; getData = () => this.data; @@ -42,8 +44,12 @@ export class PageToolbarComponent readonly trackByFn: TrackByFunction> = (_, item) => item.action || item.component; - constructor(public readonly injector: Injector) { + constructor() { + const injector = inject(Injector); + super(injector); + + this.injector = injector; } asToolbarAction(value: ToolbarActionDefault): { value: ToolbarAction } { diff --git a/npm/ng-packs/packages/components/extensible/src/lib/directives/prop-data.directive.ts b/npm/ng-packs/packages/components/extensible/src/lib/directives/prop-data.directive.ts index 2bba45ff70..b7a05d314b 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/directives/prop-data.directive.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/directives/prop-data.directive.ts @@ -1,12 +1,13 @@ /* eslint-disable @angular-eslint/no-input-rename */ -import { - Directive, - Injector, - Input, - OnChanges, - OnDestroy, - TemplateRef, - ViewContainerRef, +import { + Directive, + Injector, + Input, + OnChanges, + OnDestroy, + TemplateRef, + ViewContainerRef, + inject } from '@angular/core'; import { PropData, PropList } from '../models/props'; @@ -18,6 +19,9 @@ export class PropDataDirective> extends PropData> implements OnChanges, OnDestroy { + private tempRef = inject>(TemplateRef); + private vcRef = inject(ViewContainerRef); + @Input('abpPropDataFromList') propList?: L; @Input('abpPropDataWithRecord') record!: InferredData['record']; @@ -26,11 +30,9 @@ export class PropDataDirective> readonly getInjected: InferredData['getInjected']; - constructor( - private tempRef: TemplateRef, - private vcRef: ViewContainerRef, - injector: Injector, - ) { + constructor() { + const injector = inject(Injector); + super(); this.getInjected = injector.get.bind(injector); diff --git a/npm/ng-packs/packages/components/page/src/page-part.directive.ts b/npm/ng-packs/packages/components/page/src/page-part.directive.ts index a89302916b..bfaf1e60b6 100644 --- a/npm/ng-packs/packages/components/page/src/page-part.directive.ts +++ b/npm/ng-packs/packages/components/page/src/page-part.directive.ts @@ -1,18 +1,17 @@ -import { - Directive, - TemplateRef, - ViewContainerRef, - Input, - InjectionToken, - Optional, - Inject, - OnInit, - OnDestroy, - Injector, - OnChanges, - SimpleChanges, - SimpleChange, -} from '@angular/core'; +import { + Directive, + TemplateRef, + ViewContainerRef, + Input, + InjectionToken, + OnInit, + OnDestroy, + Injector, + OnChanges, + SimpleChanges, + SimpleChange, + inject + } from '@angular/core'; import { Observable, Subscription, of } from 'rxjs'; export interface PageRenderStrategy { @@ -28,6 +27,11 @@ export const PAGE_RENDER_STRATEGY = new InjectionToken('PAGE selector: '[abpPagePart]', }) export class PagePartDirective implements OnInit, OnDestroy, OnChanges { + private templateRef = inject>(TemplateRef); + private viewContainer = inject(ViewContainerRef); + private renderLogic = inject(PAGE_RENDER_STRATEGY, { optional: true })!; + private injector = inject(Injector); + hasRendered = false; type!: string; subscription!: Subscription; @@ -48,13 +52,6 @@ export class PagePartDirective implements OnInit, OnDestroy, OnChanges { } }; - constructor( - private templateRef: TemplateRef, - private viewContainer: ViewContainerRef, - @Optional() @Inject(PAGE_RENDER_STRATEGY) private renderLogic: PageRenderStrategy, - private injector: Injector, - ) {} - ngOnChanges({ context }: SimpleChanges): void { if (this.renderLogic?.onContextUpdate) { this.renderLogic.onContextUpdate(context); diff --git a/npm/ng-packs/packages/components/tree/src/lib/templates/expanded-icon-template.directive.ts b/npm/ng-packs/packages/components/tree/src/lib/templates/expanded-icon-template.directive.ts index 35706bd25f..e7f1bdb913 100644 --- a/npm/ng-packs/packages/components/tree/src/lib/templates/expanded-icon-template.directive.ts +++ b/npm/ng-packs/packages/components/tree/src/lib/templates/expanded-icon-template.directive.ts @@ -1,8 +1,8 @@ -import { Directive, TemplateRef } from '@angular/core'; +import { Directive, TemplateRef, inject } from '@angular/core'; + +@Directive({ + selector: '[abpTreeExpandedIconTemplate],[abp-tree-expanded-icon-template]', +}) +export class ExpandedIconTemplateDirective { template = inject>(TemplateRef); -@Directive({ - selector: '[abpTreeExpandedIconTemplate],[abp-tree-expanded-icon-template]', -}) -export class ExpandedIconTemplateDirective { - constructor(public template: TemplateRef) {} -} +} diff --git a/npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts b/npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts index 56c66af04b..70cf228021 100644 --- a/npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts +++ b/npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts @@ -1,8 +1,8 @@ -import { Directive, TemplateRef } from '@angular/core'; +import { Directive, TemplateRef, inject } from '@angular/core'; + +@Directive({ + selector: '[abpTreeNodeTemplate],[abp-tree-node-template]', +}) +export class TreeNodeTemplateDirective { template = inject>(TemplateRef); -@Directive({ - selector: '[abpTreeNodeTemplate],[abp-tree-node-template]', -}) -export class TreeNodeTemplateDirective { - constructor(public template: TemplateRef) {} -} +}