refactor(*): use inject instead constructor (#1755)

docs/i18n.en-US.md

@@ -64,8 +64,7 @@ Of course, you can also use runtime changes:
 ```ts
 import { en_US, DelonLocaleService } from '@delon/theme';
 ...
-constructor(private delonLocaleService: DelonLocaleService) {
-}
+private readonly i18n = inject(DelonLocaleService);
 
 switchLanguage() {
   this.delonLocaleService.setLocale(en_US);

docs/i18n.zh-CN.md

@@ -64,8 +64,7 @@ export class AppModule { }
 ```ts
 import { en_US, DelonLocaleService } from '@delon/theme';
 ...
-constructor(private delonLocaleService: DelonLocaleService) {
-}
+private readonly i18n = inject(DelonLocaleService);
 
 switchLanguage() {
   this.delonLocaleService.setLocale(en_US);

packages/abc/auto-focus/auto-focus.directive.ts

@@ -18,9 +18,9 @@ import { timer } from 'rxjs';
   standalone: true
 })
 export class AutoFocusDirective implements AfterViewInit {
-  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+  private readonly el: HTMLElement = inject(ElementRef).nativeElement;
   private readonly platform = inject(Platform);
-  private readonly d$ = inject(DestroyRef);
+  private readonly destroy$ = inject(DestroyRef);
 
   @Input({ transform: booleanAttribute }) enabled = true;
   @Input({ transform: numberAttribute }) delay = 300;
@@ -31,7 +31,7 @@ export class AutoFocusDirective implements AfterViewInit {
       return;
     }
     timer(this.delay)
-      .pipe(takeUntilDestroyed(this.d$))
+      .pipe(takeUntilDestroyed(this.destroy$))
       .subscribe(() => el.focus({ preventScroll: false }));
   }
 }

packages/abc/avatar-list/avatar-list.component.ts

@@ -6,15 +6,16 @@ import {
   ChangeDetectorRef,
   Component,
   ContentChildren,
+  DestroyRef,
   Input,
   OnChanges,
-  Optional,
   QueryList,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject,
+  numberAttribute
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-import { InputNumber, NumberInput } from '@delon/util/decorator';
 import { NzAvatarComponent } from 'ng-zorro-antd/avatar';
 import type { NgStyleInterface, NzSizeLDSType } from 'ng-zorro-antd/core/types';
 import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
@@ -36,16 +37,17 @@ import { AvatarListItemComponent } from './avatar-list-item.component';
   imports: [NgStyle, NgClass, NzAvatarComponent, NzTooltipDirective]
 })
 export class AvatarListComponent implements AfterViewInit, OnChanges {
-  static ngAcceptInputType_maxLength: NumberInput;
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly directionality = inject(Directionality, { optional: true });
+  private readonly destroy$ = inject(DestroyRef);
 
   private inited = false;
   @ContentChildren(AvatarListItemComponent, { descendants: false })
-  private _items!: QueryList<AvatarListItemComponent>;
-  private dir$ = this.directionality.change?.pipe(takeUntilDestroyed());
+  private readonly _items!: QueryList<AvatarListItemComponent>;
 
   items: AvatarListItemComponent[] = [];
   exceedCount = 0;
-  dir: Direction = 'ltr';
+  dir?: Direction = 'ltr';
 
   cls = '';
   avatarSize: NzSizeLDSType = 'default';
@@ -63,14 +65,9 @@ export class AvatarListComponent implements AfterViewInit, OnChanges {
         break;
     }
   }
-  @Input() @InputNumber() maxLength = 0;
+  @Input({ transform: numberAttribute }) maxLength = 0;
   @Input() excessItemsStyle: NgStyleInterface | null = null;
 
-  constructor(
-    private cdr: ChangeDetectorRef,
-    @Optional() private directionality: Directionality
-  ) {}
-
   private gen(): void {
     const { _items } = this;
     const maxLength = this.maxLength > 0 ? this.maxLength : _items.length;
@@ -82,8 +79,8 @@ export class AvatarListComponent implements AfterViewInit, OnChanges {
   }
 
   ngAfterViewInit(): void {
-    this.dir = this.directionality.value;
-    this.dir$.subscribe((direction: Direction) => {
+    this.dir = this.directionality?.value;
+    this.directionality?.change.pipe(takeUntilDestroyed(this.destroy$)).subscribe(direction => {
       this.dir = direction;
       this.cdr.detectChanges();
     });

packages/abc/cell/cell-host.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Input, OnInit, Type, ViewContainerRef } from '@angular/core';
+import { Directive, Input, OnInit, Type, ViewContainerRef, inject } from '@angular/core';
 
 import { warn } from '@delon/util/other';
 
@@ -10,12 +10,10 @@ import { CellWidgetData } from './cell.types';
   standalone: true
 })
 export class CellHostDirective implements OnInit {
-  @Input() data!: CellWidgetData;
+  private readonly srv = inject(CellService);
+  private readonly viewContainerRef = inject(ViewContainerRef);
 
-  constructor(
-    private srv: CellService,
-    private viewContainerRef: ViewContainerRef
-  ) {}
+  @Input() data!: CellWidgetData;
 
   ngOnInit(): void {
     const widget = this.data.options!.widget!;

packages/abc/cell/cell.component.ts

@@ -5,22 +5,22 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  Inject,
   Input,
   OnChanges,
   OnDestroy,
   Output,
   Renderer2,
   SimpleChange,
-  ViewEncapsulation
+  ViewEncapsulation,
+  booleanAttribute,
+  inject
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import type { SafeValue } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 
 import { updateHostClass } from '@delon/util/browser';
-import { BooleanInput, InputBoolean } from '@delon/util/decorator';
 import { WINDOW } from '@delon/util/token';
 import { NzBadgeComponent } from 'ng-zorro-antd/badge';
 import { NzCheckboxComponent } from 'ng-zorro-antd/checkbox';
@@ -126,8 +126,13 @@ import type { CellDefaultText, CellOptions, CellTextResult, CellValue, CellWidge
   ]
 })
 export class CellComponent implements OnChanges, OnDestroy {
-  static ngAcceptInputType_loading: BooleanInput;
-  static ngAcceptInputType_disabled: BooleanInput;
+  private readonly srv = inject(CellService);
+  private readonly router = inject(Router);
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly renderer = inject(Renderer2);
+  private readonly imgSrv = inject(NzImageService);
+  private readonly win = inject(WINDOW);
+  private readonly el: HTMLElement = inject(ElementRef).nativeElement;
 
   private destroy$?: Subscription;
 
@@ -139,8 +144,8 @@ export class CellComponent implements OnChanges, OnDestroy {
   @Input() value?: CellValue;
   @Output() readonly valueChange = new EventEmitter<NzSafeAny>();
   @Input() options?: CellOptions;
-  @Input() @InputBoolean() loading = false;
-  @Input() @InputBoolean() disabled = false;
+  @Input({ transform: booleanAttribute }) loading = false;
+  @Input({ transform: booleanAttribute }) disabled = false;
 
   get safeOpt(): CellOptions {
     return this.res?.options ?? {};
@@ -157,17 +162,6 @@ export class CellComponent implements OnChanges, OnDestroy {
     };
   }
 
-  constructor(
-    private srv: CellService,
-    private router: Router,
-    private cdr: ChangeDetectorRef,
-    private el: ElementRef<HTMLElement>,
-    private renderer: Renderer2,
-    private imgSrv: NzImageService,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    @Inject(WINDOW) private win: any
-  ) {}
-
   private updateValue(): void {
     this.destroy$?.unsubscribe();
     this.destroy$ = this.srv.get(this.value, this.options).subscribe(res => {
@@ -183,15 +177,15 @@ export class CellComponent implements OnChanges, OnDestroy {
   private setClass(): void {
     const { el, renderer } = this;
     const { renderType, size, type } = this.safeOpt;
-    updateHostClass(el.nativeElement, renderer, {
+    updateHostClass(el, renderer, {
       [`cell`]: true,
       [`cell__${renderType}`]: renderType != null,
       [`cell__${size}`]: size != null,
       [`cell__has-unit`]: this._unit,
       [`cell__has-default`]: this.showDefault,
       [`cell__disabled`]: this.disabled
     });
-    el.nativeElement.setAttribute('data-type', `${type}`);
+    el.setAttribute('data-type', `${type}`);
   }
 
   ngOnChanges(changes: { [p in keyof CellComponent]?: SimpleChange }): void {
@@ -219,7 +213,7 @@ export class CellComponent implements OnChanges, OnDestroy {
     if (url == null) return;
 
     if (/https?:\/\//g.test(url)) {
-      (this.win as Window).open(url, link?.target);
+      this.win.open(url, link?.target);
     } else {
       this.router.navigateByUrl(url);
     }

packages/abc/cell/cell.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, Type } from '@angular/core';
+import { Injectable, Type, inject } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { map, Observable, of } from 'rxjs';
 
@@ -22,6 +22,9 @@ import type {
 
 @Injectable({ providedIn: 'root' })
 export class CellService {
+  private readonly nzI18n = inject(NzI18nService);
+  private readonly currency = inject(CurrencyService);
+  private readonly dom = inject(DomSanitizer);
   private globalOptions!: AlainCellConfig;
   private widgets: { [key: string]: CellWidget } = {
     date: {
@@ -63,12 +66,7 @@ export class CellService {
     }
   };
 
-  constructor(
-    configSrv: AlainConfigService,
-    private nzI18n: NzI18nService,
-    private currency: CurrencyService,
-    private dom: DomSanitizer
-  ) {
+  constructor(configSrv: AlainConfigService) {
     this.globalOptions = configSrv.merge('cell', {
       date: { format: 'yyyy-MM-dd HH:mm:ss' },
       img: { size: 32 },

packages/abc/date-picker/range.directive.ts

@@ -3,13 +3,12 @@ import {
   ComponentRef,
   Directive,
   EventEmitter,
-  Host,
   Input,
   OnDestroy,
-  Optional,
   Output,
   TemplateRef,
-  ViewContainerRef
+  ViewContainerRef,
+  inject
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -30,6 +29,10 @@ import { RangePickerShortcutTplComponent } from './range-shortcut.component';
 export class RangePickerDirective implements OnDestroy, AfterViewInit {
   static ngAcceptInputType_shortcut: AlainDateRangePickerShortcut | string | null;
 
+  private readonly dom = inject(DomSanitizer);
+  private readonly vcr = inject(ViewContainerRef);
+  private readonly nativeComp = inject(NzRangePickerComponent, { host: true, optional: true });
+
   private defaultShortcuts: AlainDateRangePickerShortcut;
   private _shortcut: AlainDateRangePickerShortcut | null = null;
   private shortcutFactory: ComponentRef<RangePickerShortcutTplComponent> | null = null;
@@ -60,22 +63,17 @@ export class RangePickerDirective implements OnDestroy, AfterViewInit {
   @Output() readonly ngModelEndChange = new EventEmitter<NzSafeAny>();
 
   private get dp(): NzDatePickerComponent {
-    return this.nativeComp.datePicker;
+    return this.nativeComp!.datePicker;
   }
 
   private get srv(): DatePickerService {
     return this.dp.datePickerService;
   }
 
-  constructor(
-    private dom: DomSanitizer,
-    configSrv: AlainConfigService,
-    @Host() @Optional() private nativeComp: NzRangePickerComponent,
-    private vcr: ViewContainerRef
-  ) {
+  constructor(configSrv: AlainConfigService) {
     if (typeof ngDevMode === 'undefined' || ngDevMode) {
       assert(
-        !!nativeComp,
+        !!this.nativeComp,
         `It should be attached to nz-range-picker component, for example: '<nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" shortcut></nz-range-picker>'`
       );
     }
@@ -175,7 +173,7 @@ export class RangePickerDirective implements OnDestroy, AfterViewInit {
       };
       extraFooter = instance.tpl;
     }
-    this.nativeComp.datePicker.extraFooter = extraFooter;
+    this.nativeComp!.datePicker.extraFooter = extraFooter;
     Promise.resolve().then(() => this.cd());
   }
 

packages/abc/down-file/down-file.directive.ts

@@ -1,5 +1,5 @@
 import { HttpResponse } from '@angular/common/http';
-import { Directive, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { Directive, ElementRef, EventEmitter, Input, Output, inject } from '@angular/core';
 import { finalize } from 'rxjs';
 
 import { saveAs } from 'file-saver';
@@ -16,7 +16,8 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
   standalone: true
 })
 export class DownFileDirective {
-  private isFileSaverSupported = true;
+  private readonly el: HTMLButtonElement = inject(ElementRef).nativeElement;
+  private readonly _http = inject(_HttpClient);
   @Input('http-data') httpData: NzSafeAny;
   @Input('http-body') httpBody: NzSafeAny;
   @Input('http-method') httpMethod: string = 'get';
@@ -39,23 +40,19 @@ export class DownFileDirective {
       });
     return arr.reduce((_o, item) => item, {});
   }
+  private isFileSaverSupported = false;
 
-  constructor(
-    private el: ElementRef<HTMLButtonElement>,
-    private _http: _HttpClient
-  ) {
-    let isFileSaverSupported = false;
+  constructor() {
     try {
-      isFileSaverSupported = !!new Blob();
+      this.isFileSaverSupported = !!new Blob();
     } catch {}
-    this.isFileSaverSupported = isFileSaverSupported;
-    if (!isFileSaverSupported) {
-      el.nativeElement.classList.add(`down-file__not-support`);
+    if (!this.isFileSaverSupported) {
+      this.el.classList.add(`down-file__not-support`);
     }
   }
 
   private setDisabled(status: boolean): void {
-    const el = this.el.nativeElement;
+    const el = this.el;
     el.disabled = status;
     el.classList[status ? 'add' : 'remove'](`down-file__disabled`);
   }