Skip to content

Commit f1d8d92

Browse files
LafferyLaffery
authored
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
1 parent 5898da7 commit f1d8d92

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+312
-351
lines changed

‎components/avatar/avatar.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
ViewChild,
1717
ViewEncapsulation,
1818
afterRender,
19+
inject,
1920
numberAttribute
2021
} from '@angular/core';
2122

@@ -75,11 +76,10 @@ export class NzAvatarComponent implements OnChanges {
7576

7677
@ViewChild('textEl', { static: false }) textEl?: ElementRef<HTMLSpanElement>;
7778

78-
private el: HTMLElement = this.elementRef.nativeElement;
79+
private el: HTMLElement = inject(ElementRef).nativeElement;
7980

8081
constructor(
8182
public nzConfigService: NzConfigService,
82-
private elementRef: ElementRef,
8383
private cdr: ChangeDetectorRef
8484
) {
8585
afterRender(() => this.calcStringSize());

‎components/cascader/cascader.spec.ts

+21-15
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ import {
1818
ZERO
1919
} from '@angular/cdk/keycodes';
2020
import { OverlayContainer } from '@angular/cdk/overlay';
21-
import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
22-
import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing';
21+
import { Component, DebugElement, inject, TemplateRef, ViewChild } from '@angular/core';
22+
import { ComponentFixture, fakeAsync, flush, inject as testingInject, TestBed, tick } from '@angular/core/testing';
2323
import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
2424
import { By } from '@angular/platform-browser';
2525
import { provideNoopAnimations } from '@angular/platform-browser/animations';
@@ -73,15 +73,19 @@ describe('cascader', () => {
7373
});
7474
});
7575

76-
beforeEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
77-
overlayContainer = currentOverlayContainer;
78-
overlayContainerElement = currentOverlayContainer.getContainerElement();
79-
}));
76+
beforeEach(
77+
testingInject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
78+
overlayContainer = currentOverlayContainer;
79+
overlayContainerElement = currentOverlayContainer.getContainerElement();
80+
})
81+
);
8082

81-
afterEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
82-
currentOverlayContainer.ngOnDestroy();
83-
overlayContainer.ngOnDestroy();
84-
}));
83+
afterEach(
84+
testingInject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
85+
currentOverlayContainer.ngOnDestroy();
86+
overlayContainer.ngOnDestroy();
87+
})
88+
);
8589

8690
describe('default', () => {
8791
let fixture: ComponentFixture<NzDemoCascaderDefaultComponent>;
@@ -1864,10 +1868,12 @@ describe('cascader', () => {
18641868
let cascader: DebugElement;
18651869
let testComponent: NzDemoCascaderLoadDataComponent;
18661870

1867-
afterEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
1868-
currentOverlayContainer.ngOnDestroy();
1869-
overlayContainer.ngOnDestroy();
1870-
}));
1871+
afterEach(
1872+
testingInject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
1873+
currentOverlayContainer.ngOnDestroy();
1874+
overlayContainer.ngOnDestroy();
1875+
})
1876+
);
18711877

18721878
beforeEach(() => {
18731879
fixture = TestBed.createComponent(NzDemoCascaderLoadDataComponent);
@@ -2495,9 +2501,9 @@ export class NzDemoCascaderStatusComponent {
24952501
`
24962502
})
24972503
export class NzDemoCascaderInFormComponent {
2504+
private fb = inject(FormBuilder);
24982505
validateForm = this.fb.group({
24992506
demo: this.fb.control<string[] | null>(null, Validators.required)
25002507
});
25012508
nzOptions: NzSafeAny[] | null = options1;
2502-
constructor(private fb: FormBuilder) {}
25032509
}

‎components/cascader/demo/reactive-form.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnDestroy } from '@angular/core';
1+
import { Component, inject, OnDestroy } from '@angular/core';
22
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
33
import { Subscription } from 'rxjs';
44

@@ -67,15 +67,15 @@ const options: NzCascaderOption[] = [
6767
]
6868
})
6969
export class NzDemoCascaderReactiveFormComponent implements OnDestroy {
70+
private fb = inject(FormBuilder);
7071
form = this.fb.group({
7172
name: this.fb.control<string[] | null>(null, Validators.required)
7273
});
7374
nzOptions: NzCascaderOption[] = options;
7475
changeSubscription: Subscription;
7576

76-
constructor(private fb: FormBuilder) {
77-
const control = this.form.controls.name;
78-
this.changeSubscription = control.valueChanges.subscribe(data => {
77+
constructor() {
78+
this.changeSubscription = this.form.controls.name.valueChanges.subscribe(data => {
7979
this.onChanges(data);
8080
});
8181
}

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import {
1313
AfterContentInit,
1414
OnDestroy,
1515
ContentChild,
16-
ChangeDetectorRef
16+
ChangeDetectorRef,
17+
inject
1718
} from '@angular/core';
1819
import { BehaviorSubject, combineLatest, Observable, ReplaySubject, Subject } from 'rxjs';
1920
import { filter, map, pairwise, startWith, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
@@ -41,6 +42,9 @@ export class NzOverflowContainerComponent implements OnInit, AfterContentInit, O
4142
@ContentChild(NzOverflowRestDirective) overflowRest: NzOverflowRestDirective | undefined = undefined;
4243
overflowItems$ = new ReplaySubject<QueryList<NzOverflowItemDirective>>(1);
4344
destroy$ = new Subject<void>();
45+
46+
private nzResizeObserver = inject(NzResizeObserver);
47+
private elementRef = inject(ElementRef);
4448
containerWidth$ = this.nzResizeObserver
4549
.observe(this.elementRef.nativeElement)
4650
.pipe(map(([item]) => item.target.clientWidth || 0));
@@ -68,11 +72,7 @@ export class NzOverflowContainerComponent implements OnInit, AfterContentInit, O
6872
}
6973
}
7074

71-
constructor(
72-
private nzResizeObserver: NzResizeObserver,
73-
private elementRef: ElementRef,
74-
private cdr: ChangeDetectorRef
75-
) {}
75+
constructor(private cdr: ChangeDetectorRef) {}
7676

7777
ngOnInit(): void {
7878
const overflowItemsWidth$ = this.overflowItems$.pipe(

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

+5-6
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { ChangeDetectorRef, Directive, ElementRef } from '@angular/core';
6+
import { ChangeDetectorRef, Directive, ElementRef, inject } from '@angular/core';
77
import { distinctUntilChanged, map, startWith, tap } from 'rxjs/operators';
88

99
import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
@@ -15,6 +15,9 @@ import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
1515
}
1616
})
1717
export class NzOverflowItemDirective {
18+
private nzResizeObserver = inject(NzResizeObserver);
19+
private elementRef = inject(ElementRef);
20+
1821
overflowStyle: { [key: string]: string | number | undefined } | undefined = undefined;
1922
itemWidth$ = this.nzResizeObserver.observe(this.elementRef.nativeElement).pipe(
2023
map(([item]) => (item.target as HTMLElement).offsetWidth),
@@ -25,11 +28,7 @@ export class NzOverflowItemDirective {
2528
})
2629
);
2730
itemWidth: number | undefined = undefined;
28-
constructor(
29-
private nzResizeObserver: NzResizeObserver,
30-
public elementRef: ElementRef,
31-
private cdr: ChangeDetectorRef
32-
) {}
31+
constructor(private cdr: ChangeDetectorRef) {}
3332

3433
setItemStyle(display: boolean, order: number): void {
3534
const mergedHidden = !display;

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

+5-6
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { ChangeDetectorRef, Directive, ElementRef } from '@angular/core';
6+
import { ChangeDetectorRef, Directive, ElementRef, inject } from '@angular/core';
77
import { map, startWith, tap } from 'rxjs/operators';
88

99
import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
@@ -15,18 +15,17 @@ import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
1515
}
1616
})
1717
export class NzOverflowRestDirective {
18+
private nzResizeObserver = inject(NzResizeObserver);
19+
private elementRef = inject(ElementRef);
20+
1821
restStyle: { [key: string]: string | number | undefined } | undefined = undefined;
1922
restWidth$ = this.nzResizeObserver.observe(this.elementRef.nativeElement).pipe(
2023
map(([item]) => (item.target as HTMLElement).offsetWidth),
2124
startWith(0),
2225
tap(width => (this.restWidth = width))
2326
);
2427
restWidth = 0;
25-
constructor(
26-
private nzResizeObserver: NzResizeObserver,
27-
private elementRef: ElementRef,
28-
private cdr: ChangeDetectorRef
29-
) {}
28+
constructor(private cdr: ChangeDetectorRef) {}
3029

3130
setRestStyle(display: boolean, order: number): void {
3231
const mergedHidden = !display;

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

+5-6
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { ChangeDetectorRef, Directive, ElementRef } from '@angular/core';
6+
import { ChangeDetectorRef, Directive, ElementRef, inject } from '@angular/core';
77
import { map, tap } from 'rxjs/operators';
88

99
import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
@@ -15,17 +15,16 @@ import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
1515
}
1616
})
1717
export class NzOverflowSuffixDirective {
18+
private nzResizeObserver = inject(NzResizeObserver);
19+
private elementRef = inject(ElementRef);
20+
1821
suffixStyle = {};
1922
suffixWidth$ = this.nzResizeObserver.observe(this.elementRef.nativeElement).pipe(
2023
map(([item]) => (item.target as HTMLElement).offsetWidth),
2124
tap(width => (this.suffixWidth = width))
2225
);
2326
suffixWidth = 0;
24-
constructor(
25-
private nzResizeObserver: NzResizeObserver,
26-
private elementRef: ElementRef,
27-
private cdr: ChangeDetectorRef
28-
) {}
27+
constructor(private cdr: ChangeDetectorRef) {}
2928

3029
setSuffixStyle(start: number | null, order: number): void {
3130
if (start !== null) {

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
Component,
1212
EventEmitter,
1313
forwardRef,
14+
inject,
1415
Input,
1516
OnChanges,
1617
OnDestroy,
@@ -131,16 +132,14 @@ export class NzColorPickerComponent implements OnInit, OnChanges, ControlValueAc
131132
@Output() readonly nzOnClear = new EventEmitter<boolean>();
132133
@Output() readonly nzOnOpenChange = new EventEmitter<boolean>();
133134

135+
private formBuilder = inject(FormBuilder);
134136
private destroy$ = new Subject<void>();
135137
private isNzDisableFirstChange: boolean = true;
136138
blockColor: string = '';
137139
clearColor: boolean = false;
138140
showText: string = defaultColor.toHexString();
139141

140-
constructor(
141-
private formBuilder: FormBuilder,
142-
private cdr: ChangeDetectorRef
143-
) {}
142+
constructor(private cdr: ChangeDetectorRef) {}
144143

145144
formControl = this.formBuilder.control('');
146145

‎components/color-picker/demo/use.ts

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component } from '@angular/core';
1+
import { Component, inject } from '@angular/core';
22
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
33

44
import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -14,7 +14,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
1414
<nz-form-item>
1515
<nz-form-label [nzSpan]="4">name</nz-form-label>
1616
<nz-form-control [nzSpan]="16">
17-
<input nz-input formControlName="userName" />
17+
<input nz-input formControlName="username" />
1818
</nz-form-control>
1919
</nz-form-item>
2020
<nz-form-item>
@@ -32,13 +32,12 @@ import { NzInputModule } from 'ng-zorro-antd/input';
3232
`
3333
})
3434
export class NzDemoColorPickerUseComponent {
35+
private formBuilder = inject(FormBuilder);
3536
validateForm = this.formBuilder.group({
36-
userName: ['color-picker', [Validators.required]],
37+
username: ['color-picker', [Validators.required]],
3738
colorPicker: ['#1677ff']
3839
});
3940

40-
constructor(private formBuilder: FormBuilder) {}
41-
4241
submitForm(): void {
4342
console.log(this.validateForm.value);
4443
}

‎components/cron-expression/demo/use.ts

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component } from '@angular/core';
1+
import { Component, inject } from '@angular/core';
22
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
33

44
import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -14,7 +14,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
1414
<nz-form-item>
1515
<nz-form-label [nzSpan]="6">name</nz-form-label>
1616
<nz-form-control [nzSpan]="14">
17-
<input nz-input formControlName="userName" />
17+
<input nz-input formControlName="username" />
1818
</nz-form-control>
1919
</nz-form-item>
2020
<nz-form-item>
@@ -38,18 +38,17 @@ import { NzInputModule } from 'ng-zorro-antd/input';
3838
`
3939
})
4040
export class NzDemoCronExpressionUseComponent {
41+
private fb = inject(FormBuilder);
4142
validateForm: FormGroup<{
42-
userName: FormControl<string | null>;
43+
username: FormControl<string | null>;
4344
cronLinux: FormControl<string | null>;
4445
cronSpring: FormControl<string | null>;
4546
}> = this.fb.group({
46-
userName: ['cron-expression', [Validators.required]],
47+
username: ['cron-expression', [Validators.required]],
4748
cronLinux: ['* 1 * * *', [Validators.required]],
4849
cronSpring: ['0 * 1 * * *', [Validators.required]]
4950
});
5051

51-
constructor(private fb: FormBuilder) {}
52-
5352
submitForm(): void {
5453
console.log(this.validateForm.value);
5554
}

‎components/date-picker/date-picker.component.spec.ts

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ESCAPE } from '@angular/cdk/keycodes';
22
import { OverlayContainer } from '@angular/cdk/overlay';
3-
import { ApplicationRef, Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
4-
import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing';
3+
import { ApplicationRef, Component, DebugElement, inject, TemplateRef, ViewChild } from '@angular/core';
4+
import { ComponentFixture, fakeAsync, flush, inject as testingInject, TestBed, tick } from '@angular/core/testing';
55
import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
66
import { By } from '@angular/platform-browser';
77
import { provideNoopAnimations } from '@angular/platform-browser/animations';
@@ -47,11 +47,13 @@ describe('NzDatePickerComponent', () => {
4747
debugElement = fixture.debugElement;
4848
});
4949

50-
beforeEach(inject([OverlayContainer, NzI18nService], (oc: OverlayContainer, i18n: NzI18nService) => {
51-
overlayContainer = oc;
52-
overlayContainerElement = oc.getContainerElement();
53-
i18nService = i18n;
54-
}));
50+
beforeEach(
51+
testingInject([OverlayContainer, NzI18nService], (oc: OverlayContainer, i18n: NzI18nService) => {
52+
overlayContainer = oc;
53+
overlayContainerElement = oc.getContainerElement();
54+
i18nService = i18n;
55+
})
56+
);
5557

5658
afterEach(() => {
5759
overlayContainer.ngOnDestroy();
@@ -1598,9 +1600,8 @@ class NzTestDatePickerStatusComponent {
15981600
`
15991601
})
16001602
class NzTestDatePickerInFormComponent {
1603+
private fb = inject(FormBuilder);
16011604
validateForm = this.fb.group({
16021605
demo: this.fb.control<Date | null>(null, Validators.required)
16031606
});
1604-
1605-
constructor(private fb: FormBuilder) {}
16061607
}

‎components/date-picker/lib/abstract-table.ts

-3
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import { NzCalendarI18nInterface } from 'ng-zorro-antd/i18n';
2323
import { DateBodyRow, DateCell } from './interface';
2424

2525
@Directive()
26-
// eslint-disable-next-line @angular-eslint/directive-class-suffix
2726
export abstract class AbstractTable implements OnInit, OnChanges {
2827
headRow: DateCell[] = [];
2928
bodyRows: DateBodyRow[] = [];
@@ -52,8 +51,6 @@ export abstract class AbstractTable implements OnInit, OnChanges {
5251
}
5352
}
5453

55-
56-
5754
hasRangeValue(): boolean {
5855
return this.selectedValue?.length > 0 || this.hoverValue?.length > 0;
5956
}

0 commit comments

Comments
 (0)