refactor(module:*): use ECMAScript standard class field (#8718)

* refactor: replace explicit constructor injections with `inject`

* refactor(module:*): use ECMAScript standard class field

* test(module:drawer): update transition style expectations in Drawer test

Author: Laffery

components/avatar/avatar.component.ts

@@ -16,6 +16,7 @@ import {
   ViewChild,
   ViewEncapsulation,
   afterRender,
+  inject,
   numberAttribute
 } from '@angular/core';
 
@@ -75,11 +76,10 @@ export class NzAvatarComponent implements OnChanges {
 
   @ViewChild('textEl', { static: false }) textEl?: ElementRef<HTMLSpanElement>;
 
-  private el: HTMLElement = this.elementRef.nativeElement;
+  private el: HTMLElement = inject(ElementRef).nativeElement;
 
   constructor(
     public nzConfigService: NzConfigService,
-    private elementRef: ElementRef,
     private cdr: ChangeDetectorRef
   ) {
     afterRender(() => this.calcStringSize());

components/cascader/cascader.spec.ts

@@ -18,8 +18,8 @@ import {
   ZERO
 } from '@angular/cdk/keycodes';
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
-import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing';
+import { Component, DebugElement, inject, TemplateRef, ViewChild } from '@angular/core';
+import { ComponentFixture, fakeAsync, flush, inject as testingInject, TestBed, tick } from '@angular/core/testing';
 import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
@@ -73,15 +73,19 @@ describe('cascader', () => {
     });
   });
 
-  beforeEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
-    overlayContainer = currentOverlayContainer;
-    overlayContainerElement = currentOverlayContainer.getContainerElement();
-  }));
+  beforeEach(
+    testingInject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
+      overlayContainer = currentOverlayContainer;
+      overlayContainerElement = currentOverlayContainer.getContainerElement();
+    })
+  );
 
-  afterEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
-    currentOverlayContainer.ngOnDestroy();
-    overlayContainer.ngOnDestroy();
-  }));
+  afterEach(
+    testingInject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
+      currentOverlayContainer.ngOnDestroy();
+      overlayContainer.ngOnDestroy();
+    })
+  );
 
   describe('default', () => {
     let fixture: ComponentFixture<NzDemoCascaderDefaultComponent>;
@@ -1864,10 +1868,12 @@ describe('cascader', () => {
     let cascader: DebugElement;
     let testComponent: NzDemoCascaderLoadDataComponent;
 
-    afterEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
-      currentOverlayContainer.ngOnDestroy();
-      overlayContainer.ngOnDestroy();
-    }));
+    afterEach(
+      testingInject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
+        currentOverlayContainer.ngOnDestroy();
+        overlayContainer.ngOnDestroy();
+      })
+    );
 
     beforeEach(() => {
       fixture = TestBed.createComponent(NzDemoCascaderLoadDataComponent);
@@ -2495,9 +2501,9 @@ export class NzDemoCascaderStatusComponent {
   `
 })
 export class NzDemoCascaderInFormComponent {
+  private fb = inject(FormBuilder);
   validateForm = this.fb.group({
     demo: this.fb.control<string[] | null>(null, Validators.required)
   });
   nzOptions: NzSafeAny[] | null = options1;
-  constructor(private fb: FormBuilder) {}
 }

components/cascader/demo/reactive-form.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Subscription } from 'rxjs';
 
@@ -67,15 +67,15 @@ const options: NzCascaderOption[] = [
   ]
 })
 export class NzDemoCascaderReactiveFormComponent implements OnDestroy {
+  private fb = inject(FormBuilder);
   form = this.fb.group({
     name: this.fb.control<string[] | null>(null, Validators.required)
   });
   nzOptions: NzCascaderOption[] = options;
   changeSubscription: Subscription;
 
-  constructor(private fb: FormBuilder) {
-    const control = this.form.controls.name;
-    this.changeSubscription = control.valueChanges.subscribe(data => {
+  constructor() {
+    this.changeSubscription = this.form.controls.name.valueChanges.subscribe(data => {
       this.onChanges(data);
     });
   }

components/cdk/overflow/overflow-container.component.ts

@@ -13,7 +13,8 @@ import {
   AfterContentInit,
   OnDestroy,
   ContentChild,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  inject
 } from '@angular/core';
 import { BehaviorSubject, combineLatest, Observable, ReplaySubject, Subject } from 'rxjs';
 import { filter, map, pairwise, startWith, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
@@ -41,6 +42,9 @@ export class NzOverflowContainerComponent implements OnInit, AfterContentInit, O
   @ContentChild(NzOverflowRestDirective) overflowRest: NzOverflowRestDirective | undefined = undefined;
   overflowItems$ = new ReplaySubject<QueryList<NzOverflowItemDirective>>(1);
   destroy$ = new Subject<void>();
+
+  private nzResizeObserver = inject(NzResizeObserver);
+  private elementRef = inject(ElementRef);
   containerWidth$ = this.nzResizeObserver
     .observe(this.elementRef.nativeElement)
     .pipe(map(([item]) => item.target.clientWidth || 0));
@@ -68,11 +72,7 @@ export class NzOverflowContainerComponent implements OnInit, AfterContentInit, O
     }
   }
 
-  constructor(
-    private nzResizeObserver: NzResizeObserver,
-    private elementRef: ElementRef,
-    private cdr: ChangeDetectorRef
-  ) {}
+  constructor(private cdr: ChangeDetectorRef) {}
 
   ngOnInit(): void {
     const overflowItemsWidth$ = this.overflowItems$.pipe(

components/cdk/overflow/overflow-item.directive.ts

@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectorRef, Directive, ElementRef } from '@angular/core';
+import { ChangeDetectorRef, Directive, ElementRef, inject } from '@angular/core';
 import { distinctUntilChanged, map, startWith, tap } from 'rxjs/operators';
 
 import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
@@ -15,6 +15,9 @@ import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
   }
 })
 export class NzOverflowItemDirective {
+  private nzResizeObserver = inject(NzResizeObserver);
+  private elementRef = inject(ElementRef);
+
   overflowStyle: { [key: string]: string | number | undefined } | undefined = undefined;
   itemWidth$ = this.nzResizeObserver.observe(this.elementRef.nativeElement).pipe(
     map(([item]) => (item.target as HTMLElement).offsetWidth),
@@ -25,11 +28,7 @@ export class NzOverflowItemDirective {
     })
   );
   itemWidth: number | undefined = undefined;
-  constructor(
-    private nzResizeObserver: NzResizeObserver,
-    public elementRef: ElementRef,
-    private cdr: ChangeDetectorRef
-  ) {}
+  constructor(private cdr: ChangeDetectorRef) {}
 
   setItemStyle(display: boolean, order: number): void {
     const mergedHidden = !display;

components/cdk/overflow/overflow-rest.directive.ts

@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectorRef, Directive, ElementRef } from '@angular/core';
+import { ChangeDetectorRef, Directive, ElementRef, inject } from '@angular/core';
 import { map, startWith, tap } from 'rxjs/operators';
 
 import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
@@ -15,18 +15,17 @@ import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
   }
 })
 export class NzOverflowRestDirective {
+  private nzResizeObserver = inject(NzResizeObserver);
+  private elementRef = inject(ElementRef);
+
   restStyle: { [key: string]: string | number | undefined } | undefined = undefined;
   restWidth$ = this.nzResizeObserver.observe(this.elementRef.nativeElement).pipe(
     map(([item]) => (item.target as HTMLElement).offsetWidth),
     startWith(0),
     tap(width => (this.restWidth = width))
   );
   restWidth = 0;
-  constructor(
-    private nzResizeObserver: NzResizeObserver,
-    private elementRef: ElementRef,
-    private cdr: ChangeDetectorRef
-  ) {}
+  constructor(private cdr: ChangeDetectorRef) {}
 
   setRestStyle(display: boolean, order: number): void {
     const mergedHidden = !display;

components/cdk/overflow/overflow-suffix.directive.ts

@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectorRef, Directive, ElementRef } from '@angular/core';
+import { ChangeDetectorRef, Directive, ElementRef, inject } from '@angular/core';
 import { map, tap } from 'rxjs/operators';
 
 import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
@@ -15,17 +15,16 @@ import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
   }
 })
 export class NzOverflowSuffixDirective {
+  private nzResizeObserver = inject(NzResizeObserver);
+  private elementRef = inject(ElementRef);
+
   suffixStyle = {};
   suffixWidth$ = this.nzResizeObserver.observe(this.elementRef.nativeElement).pipe(
     map(([item]) => (item.target as HTMLElement).offsetWidth),
     tap(width => (this.suffixWidth = width))
   );
   suffixWidth = 0;
-  constructor(
-    private nzResizeObserver: NzResizeObserver,
-    private elementRef: ElementRef,
-    private cdr: ChangeDetectorRef
-  ) {}
+  constructor(private cdr: ChangeDetectorRef) {}
 
   setSuffixStyle(start: number | null, order: number): void {
     if (start !== null) {

components/color-picker/color-picker.component.ts

@@ -11,6 +11,7 @@ import {
   Component,
   EventEmitter,
   forwardRef,
+  inject,
   Input,
   OnChanges,
   OnDestroy,
@@ -131,16 +132,14 @@ export class NzColorPickerComponent implements OnInit, OnChanges, ControlValueAc
   @Output() readonly nzOnClear = new EventEmitter<boolean>();
   @Output() readonly nzOnOpenChange = new EventEmitter<boolean>();
 
+  private formBuilder = inject(FormBuilder);
   private destroy$ = new Subject<void>();
   private isNzDisableFirstChange: boolean = true;
   blockColor: string = '';
   clearColor: boolean = false;
   showText: string = defaultColor.toHexString();
 
-  constructor(
-    private formBuilder: FormBuilder,
-    private cdr: ChangeDetectorRef
-  ) {}
+  constructor(private cdr: ChangeDetectorRef) {}
 
   formControl = this.formBuilder.control('');
 

components/color-picker/demo/use.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -14,7 +14,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
       <nz-form-item>
         <nz-form-label [nzSpan]="4">name</nz-form-label>
         <nz-form-control [nzSpan]="16">
-          <input nz-input formControlName="userName" />
+          <input nz-input formControlName="username" />
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
@@ -32,13 +32,12 @@ import { NzInputModule } from 'ng-zorro-antd/input';
   `
 })
 export class NzDemoColorPickerUseComponent {
+  private formBuilder = inject(FormBuilder);
   validateForm = this.formBuilder.group({
-    userName: ['color-picker', [Validators.required]],
+    username: ['color-picker', [Validators.required]],
     colorPicker: ['#1677ff']
   });
 
-  constructor(private formBuilder: FormBuilder) {}
-
   submitForm(): void {
     console.log(this.validateForm.value);
   }

components/cron-expression/demo/use.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -14,7 +14,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
       <nz-form-item>
         <nz-form-label [nzSpan]="6">name</nz-form-label>
         <nz-form-control [nzSpan]="14">
-          <input nz-input formControlName="userName" />
+          <input nz-input formControlName="username" />
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
@@ -38,18 +38,17 @@ import { NzInputModule } from 'ng-zorro-antd/input';
   `
 })
 export class NzDemoCronExpressionUseComponent {
+  private fb = inject(FormBuilder);
   validateForm: FormGroup<{
-    userName: FormControl<string | null>;
+    username: FormControl<string | null>;
     cronLinux: FormControl<string | null>;
     cronSpring: FormControl<string | null>;
   }> = this.fb.group({
-    userName: ['cron-expression', [Validators.required]],
+    username: ['cron-expression', [Validators.required]],
     cronLinux: ['* 1 * * *', [Validators.required]],
     cronSpring: ['0 * 1 * * *', [Validators.required]]
   });
 
-  constructor(private fb: FormBuilder) {}
-
   submitForm(): void {
     console.log(this.validateForm.value);
   }