diff --git a/components/affix/affix.component.ts b/components/affix/affix.component.ts index 222c3c4cf66..64222d5c4e6 100644 --- a/components/affix/affix.component.ts +++ b/components/affix/affix.component.ts @@ -13,13 +13,12 @@ import { Component, ElementRef, EventEmitter, - Inject, + inject, Input, NgZone, OnChanges, OnDestroy, OnInit, - Optional, Output, Renderer2, SimpleChanges, @@ -32,7 +31,7 @@ import { map, takeUntil, throttleTime } from 'rxjs/operators'; import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer'; import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; import { NzScrollService } from 'ng-zorro-antd/core/services'; -import { NgStyleInterface, NzSafeAny } from 'ng-zorro-antd/core/types'; +import { NgStyleInterface } from 'ng-zorro-antd/core/types'; import { getStyleAsText, numberAttributeWithZeroFallback, shallowEqual } from 'ng-zorro-antd/core/util'; import { AffixRespondEvents } from './respond-events'; @@ -82,7 +81,7 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy, On private offsetChanged$ = new ReplaySubject(1); private destroy$ = new Subject(); private timeout?: ReturnType; - private document: Document; + private document: Document = inject(DOCUMENT); private get target(): Element | Window { const el = this.nzTarget; @@ -91,7 +90,6 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy, On constructor( el: ElementRef, - @Inject(DOCUMENT) doc: NzSafeAny, public nzConfigService: NzConfigService, private scrollSrv: NzScrollService, private ngZone: NgZone, @@ -99,11 +97,10 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy, On private renderer: Renderer2, private nzResizeObserver: NzResizeObserver, private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality + private directionality: Directionality ) { // The wrapper would stay at the original position as a placeholder. this.placeholderNode = el.nativeElement; - this.document = doc; } ngOnInit(): void { diff --git a/components/alert/alert.component.ts b/components/alert/alert.component.ts index a706f55ec14..f4b652ae0b9 100644 --- a/components/alert/alert.component.ts +++ b/components/alert/alert.component.ts @@ -13,7 +13,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Output, SimpleChanges, TemplateRef, @@ -128,7 +127,7 @@ export class NzAlertComponent implements OnChanges, OnDestroy, OnInit { constructor( public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality + private directionality: Directionality ) { this.nzConfigService .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME) diff --git a/components/anchor/anchor.component.ts b/components/anchor/anchor.component.ts index 1533b35d01c..11fbbfba6b3 100644 --- a/components/anchor/anchor.component.ts +++ b/components/anchor/anchor.component.ts @@ -13,7 +13,7 @@ import { Component, ElementRef, EventEmitter, - Inject, + inject, Input, NgZone, numberAttribute, @@ -31,7 +31,7 @@ import { takeUntil, throttleTime } from 'rxjs/operators'; import { NzAffixModule } from 'ng-zorro-antd/affix'; import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; import { NzScrollService } from 'ng-zorro-antd/core/services'; -import { NgStyleInterface, NzDirectionVHType, NzSafeAny } from 'ng-zorro-antd/core/types'; +import { NgStyleInterface, NzDirectionVHType } from 'ng-zorro-antd/core/types'; import { numberAttributeWithZeroFallback } from 'ng-zorro-antd/core/util'; import { NzAnchorLinkComponent } from './anchor-link.component'; @@ -122,9 +122,9 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit, OnChanges { private animating = false; private destroy$ = new Subject(); private handleScrollTimeoutID?: ReturnType; + private doc: Document = inject(DOCUMENT); constructor( - @Inject(DOCUMENT) private doc: NzSafeAny, public nzConfigService: NzConfigService, private scrollSrv: NzScrollService, private cdr: ChangeDetectorRef, @@ -250,7 +250,7 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit, OnChanges { } handleScrollTo(linkComp: NzAnchorLinkComponent): void { - const el = this.doc.querySelector(linkComp.nzHref); + const el = this.doc.querySelector(linkComp.nzHref); if (!el) { return; } @@ -278,7 +278,7 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit, OnChanges { } if (nzContainer) { const container = this.nzContainer; - this.container = typeof container === 'string' ? this.doc.querySelector(container) : container; + this.container = typeof container === 'string' ? this.doc.querySelector(container)! : container; this.registerScrollEvent(); } if (nzCurrentAnchor) { diff --git a/components/auto-complete/autocomplete-option.component.ts b/components/auto-complete/autocomplete-option.component.ts index 2397ed02a4f..5a0f497f2eb 100644 --- a/components/auto-complete/autocomplete-option.component.ts +++ b/components/auto-complete/autocomplete-option.component.ts @@ -13,10 +13,10 @@ import { NgZone, OnDestroy, OnInit, - Optional, Output, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Subject, fromEvent } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; @@ -66,15 +66,14 @@ export class NzAutocompleteOptionComponent implements OnInit, OnDestroy { active = false; selected = false; + nzAutocompleteOptgroupComponent = inject(NzAutocompleteOptgroupComponent, { optional: true }); private destroy$ = new Subject(); constructor( private ngZone: NgZone, private changeDetectorRef: ChangeDetectorRef, - private element: ElementRef, - @Optional() - public nzAutocompleteOptgroupComponent: NzAutocompleteOptgroupComponent + private element: ElementRef ) {} ngOnInit(): void { diff --git a/components/auto-complete/autocomplete-trigger.directive.ts b/components/auto-complete/autocomplete-trigger.directive.ts index 38710350904..122083719a1 100644 --- a/components/auto-complete/autocomplete-trigger.directive.ts +++ b/components/auto-complete/autocomplete-trigger.directive.ts @@ -19,13 +19,12 @@ import { Directive, ElementRef, ExistingProvider, - forwardRef, - Inject, Input, NgZone, OnDestroy, - Optional, - ViewContainerRef + ViewContainerRef, + forwardRef, + inject } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Subject, Subscription } from 'rxjs'; @@ -90,14 +89,14 @@ export class NzAutocompleteTriggerDirective implements AfterViewInit, ControlVal private selectionChangeSubscription!: Subscription; private optionsChangeSubscription!: Subscription; private overlayOutsideClickSubscription!: Subscription; + private document: Document = inject(DOCUMENT); + private nzInputGroupWhitSuffixOrPrefixDirective = inject(NzInputGroupWhitSuffixOrPrefixDirective, { optional: true }); constructor( private ngZone: NgZone, private elementRef: ElementRef, private overlay: Overlay, - private viewContainerRef: ViewContainerRef, - @Optional() private nzInputGroupWhitSuffixOrPrefixDirective: NzInputGroupWhitSuffixOrPrefixDirective, - @Optional() @Inject(DOCUMENT) private document: NzSafeAny + private viewContainerRef: ViewContainerRef ) {} ngAfterViewInit(): void { diff --git a/components/auto-complete/autocomplete.component.ts b/components/auto-complete/autocomplete.component.ts index b1557c84cff..6fb92e69b48 100644 --- a/components/auto-complete/autocomplete.component.ts +++ b/components/auto-complete/autocomplete.component.ts @@ -15,12 +15,10 @@ import { ContentChildren, ElementRef, EventEmitter, - Host, Input, OnChanges, OnDestroy, OnInit, - Optional, Output, QueryList, SimpleChanges, @@ -168,10 +166,11 @@ export class NzAutocompleteComponent implements AfterContentInit, AfterViewInit, private afterNextRender$ = inject(NZ_AFTER_NEXT_RENDER$); + noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); + constructor( private changeDetectorRef: ChangeDetectorRef, - @Optional() private directionality: Directionality, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/back-top/back-top.component.ts b/components/back-top/back-top.component.ts index 953e7569f6a..7800baa3bf5 100644 --- a/components/back-top/back-top.component.ts +++ b/components/back-top/back-top.component.ts @@ -12,18 +12,17 @@ import { Component, ElementRef, EventEmitter, - Inject, Input, NgZone, OnChanges, OnDestroy, OnInit, - Optional, Output, SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation, + inject, numberAttribute } from '@angular/core'; import { Subject, Subscription, fromEvent } from 'rxjs'; @@ -32,7 +31,6 @@ import { debounceTime, takeUntil } from 'rxjs/operators'; import { fadeMotion } from 'ng-zorro-antd/core/animation'; import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; import { NzDestroyService, NzScrollService } from 'ng-zorro-antd/core/services'; -import { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NzIconModule } from 'ng-zorro-antd/icon'; const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'backTop'; @@ -98,16 +96,16 @@ export class NzBackTopComponent implements OnInit, OnDestroy, OnChanges { } private backTopClickSubscription = Subscription.EMPTY; + private doc: Document = inject(DOCUMENT); constructor( - @Inject(DOCUMENT) private doc: NzSafeAny, public nzConfigService: NzConfigService, private scrollSrv: NzScrollService, private platform: Platform, private zone: NgZone, private cdr: ChangeDetectorRef, private destroy$: NzDestroyService, - @Optional() private directionality: Directionality + private directionality: Directionality ) { this.dir = this.directionality.value; } @@ -156,7 +154,7 @@ export class NzBackTopComponent implements OnInit, OnDestroy, OnChanges { ngOnChanges(changes: SimpleChanges): void { const { nzTarget } = changes; if (nzTarget) { - this.target = typeof this.nzTarget === 'string' ? this.doc.querySelector(this.nzTarget) : this.nzTarget; + this.target = typeof this.nzTarget === 'string' ? this.doc.querySelector(this.nzTarget) : this.nzTarget!; this.registerScrollEvent(); } } diff --git a/components/badge/badge.component.ts b/components/badge/badge.component.ts index cfb6d00026b..62c7a592cfe 100644 --- a/components/badge/badge.component.ts +++ b/components/badge/badge.component.ts @@ -10,17 +10,16 @@ import { ChangeDetectorRef, Component, ElementRef, - Host, Input, OnChanges, OnDestroy, OnInit, - Optional, Renderer2, SimpleChanges, TemplateRef, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -101,13 +100,14 @@ export class NzBadgeComponent implements OnChanges, OnDestroy, OnInit { @Input() nzOffset?: [number, number]; @Input() nzSize: NzSizeDSType = 'default'; + noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); + constructor( public nzConfigService: NzConfigService, private renderer: Renderer2, private cdr: ChangeDetectorRef, private elementRef: ElementRef, - @Optional() private directionality: Directionality, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective + private directionality: Directionality ) {} ngOnInit(): void { this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => { diff --git a/components/breadcrumb/breadcrumb.component.ts b/components/breadcrumb/breadcrumb.component.ts index 06618d210cf..27e99f4867d 100644 --- a/components/breadcrumb/breadcrumb.component.ts +++ b/components/breadcrumb/breadcrumb.component.ts @@ -13,7 +13,6 @@ import { Input, OnDestroy, OnInit, - Optional, Renderer2, TemplateRef, ViewEncapsulation, @@ -73,7 +72,7 @@ export class NzBreadCrumbComponent implements OnInit, OnDestroy, NzBreadcrumb { private cdr: ChangeDetectorRef, private elementRef: ElementRef, private renderer: Renderer2, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/button/button-group.component.ts b/components/button/button-group.component.ts index 55a67a4b889..e570abe2fea 100644 --- a/components/button/button-group.component.ts +++ b/components/button/button-group.component.ts @@ -4,15 +4,7 @@ */ import { Direction, Directionality } from '@angular/cdk/bidi'; -import { - ChangeDetectionStrategy, - Component, - Input, - OnDestroy, - OnInit, - Optional, - ViewEncapsulation -} from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -40,7 +32,7 @@ export class NzButtonGroupComponent implements OnDestroy, OnInit { private destroy$ = new Subject(); - constructor(@Optional() private directionality: Directionality) {} + constructor(private directionality: Directionality) {} ngOnInit(): void { this.dir = this.directionality.value; this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => { diff --git a/components/button/button.component.ts b/components/button/button.component.ts index f165b5882c8..5f00a05d685 100644 --- a/components/button/button.component.ts +++ b/components/button/button.component.ts @@ -17,7 +17,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Renderer2, SimpleChanges, ViewEncapsulation, @@ -117,7 +116,7 @@ export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, A private cdr: ChangeDetectorRef, private renderer: Renderer2, public nzConfigService: NzConfigService, - @Optional() private directionality: Directionality + private directionality: Directionality ) { this.nzConfigService .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME) diff --git a/components/calendar/calendar.component.ts b/components/calendar/calendar.component.ts index aa39d56e21f..85079a72ef5 100644 --- a/components/calendar/calendar.component.ts +++ b/components/calendar/calendar.component.ts @@ -14,7 +14,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Output, SimpleChanges, TemplateRef, @@ -147,7 +146,7 @@ export class NzCalendarComponent implements ControlValueAccessor, OnChanges, OnI constructor( private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/card/card.component.ts b/components/card/card.component.ts index 188b0a244ca..75dcc69a1dd 100755 --- a/components/card/card.component.ts +++ b/components/card/card.component.ts @@ -14,7 +14,6 @@ import { Input, OnDestroy, OnInit, - Optional, QueryList, TemplateRef, ViewEncapsulation, @@ -120,7 +119,7 @@ export class NzCardComponent implements OnDestroy, OnInit { constructor( public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality + private directionality: Directionality ) { this.nzConfigService .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME) diff --git a/components/carousel/carousel.component.ts b/components/carousel/carousel.component.ts index 9ff97b30d7d..c0ba8dc4a93 100644 --- a/components/carousel/carousel.component.ts +++ b/components/carousel/carousel.component.ts @@ -16,13 +16,11 @@ import { ContentChildren, ElementRef, EventEmitter, - Inject, Input, NgZone, OnChanges, OnDestroy, OnInit, - Optional, Output, QueryList, Renderer2, @@ -31,6 +29,7 @@ import { ViewChild, ViewEncapsulation, booleanAttribute, + inject, numberAttribute } from '@angular/core'; import { Subject, fromEvent } from 'rxjs'; @@ -50,7 +49,6 @@ import { NZ_CAROUSEL_CUSTOM_STRATEGIES, NzCarouselDotPosition, NzCarouselEffects, - NzCarouselStrategyRegistryItem, PointerVector } from './typings'; @@ -169,6 +167,8 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD private pointerDelta: PointerVector | null = null; private isTransiting = false; private isDragging = false; + private directionality = inject(Directionality); + private customStrategies = inject(NZ_CAROUSEL_CUSTOM_STRATEGIES, { optional: true }); constructor( elementRef: ElementRef, @@ -179,9 +179,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD private readonly platform: Platform, private readonly resizeService: NzResizeService, private readonly nzDragService: NzDragService, - private nzResizeObserver: NzResizeObserver, - @Optional() private directionality: Directionality, - @Optional() @Inject(NZ_CAROUSEL_CUSTOM_STRATEGIES) private customStrategies: NzCarouselStrategyRegistryItem[] + private nzResizeObserver: NzResizeObserver ) { this.nzDotPosition = 'bottom'; this.el = elementRef.nativeElement; diff --git a/components/cascader/cascader.component.ts b/components/cascader/cascader.component.ts index 45a58be49c4..367f4ae9008 100644 --- a/components/cascader/cascader.component.ts +++ b/components/cascader/cascader.component.ts @@ -14,14 +14,12 @@ import { Component, ElementRef, EventEmitter, - Host, HostListener, Input, NgZone, OnChanges, OnDestroy, OnInit, - Optional, Output, QueryList, Renderer2, @@ -32,6 +30,7 @@ import { ViewEncapsulation, booleanAttribute, forwardRef, + inject, numberAttribute } from '@angular/core'; import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; @@ -392,6 +391,10 @@ export class NzCascaderComponent return !!this.nzLabelRender; } + noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); + nzFormStatusService = inject(NzFormStatusService, { optional: true }); + private nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); + constructor( public cascaderService: NzCascaderService, public nzConfigService: NzConfigService, @@ -401,10 +404,7 @@ export class NzCascaderComponent private destroy$: NzDestroyService, private elementRef: ElementRef, private renderer: Renderer2, - @Optional() private directionality: Directionality, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective, - @Optional() public nzFormStatusService?: NzFormStatusService, - @Optional() private nzFormNoStatusService?: NzFormNoStatusService + private directionality: Directionality ) { this.el = elementRef.nativeElement; this.cascaderService.withComponent(this); diff --git a/components/checkbox/checkbox-group.component.ts b/components/checkbox/checkbox-group.component.ts index 85125a6a40a..68e69444dc7 100644 --- a/components/checkbox/checkbox-group.component.ts +++ b/components/checkbox/checkbox-group.component.ts @@ -12,7 +12,6 @@ import { Input, OnDestroy, OnInit, - Optional, ViewEncapsulation, booleanAttribute, forwardRef @@ -84,7 +83,7 @@ export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit, O private elementRef: ElementRef, private focusMonitor: FocusMonitor, private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/checkbox/checkbox.component.ts b/components/checkbox/checkbox.component.ts index bde8b9d2bbe..87db6323f9e 100644 --- a/components/checkbox/checkbox.component.ts +++ b/components/checkbox/checkbox.component.ts @@ -16,12 +16,12 @@ import { NgZone, OnDestroy, OnInit, - Optional, Output, ViewChild, ViewEncapsulation, booleanAttribute, - forwardRef + forwardRef, + inject } from '@angular/core'; import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Subject, fromEvent } from 'rxjs'; @@ -130,14 +130,15 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnDest this.inputElement.nativeElement.blur(); } + private nzCheckboxWrapperComponent = inject(NzCheckboxWrapperComponent, { optional: true }); + nzFormStatusService = inject(NzFormStatusService, { optional: true }); + constructor( private ngZone: NgZone, private elementRef: ElementRef, - @Optional() private nzCheckboxWrapperComponent: NzCheckboxWrapperComponent, private cdr: ChangeDetectorRef, private focusMonitor: FocusMonitor, - @Optional() private directionality: Directionality, - @Optional() public nzFormStatusService?: NzFormStatusService + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/code-editor/code-editor.service.ts b/components/code-editor/code-editor.service.ts index 0366e702f02..5b12446b63e 100644 --- a/components/code-editor/code-editor.service.ts +++ b/components/code-editor/code-editor.service.ts @@ -4,8 +4,8 @@ */ import { DOCUMENT } from '@angular/common'; -import { Inject, Injectable, OnDestroy } from '@angular/core'; -import { BehaviorSubject, Observable, of, ReplaySubject, Subscription } from 'rxjs'; +import { Injectable, OnDestroy, inject } from '@angular/core'; +import { BehaviorSubject, Observable, ReplaySubject, Subscription, of } from 'rxjs'; import { map, tap } from 'rxjs/operators'; import { CodeEditorConfig, NzConfigService } from 'ng-zorro-antd/core/config'; @@ -40,7 +40,7 @@ let loadingStatus = NzCodeEditorLoadingStatus.UNLOAD; providedIn: 'root' }) export class NzCodeEditorService implements OnDestroy { - private document: Document; + private document: Document = inject(DOCUMENT); private firstEditorInitialized = false; private option: JoinedEditorOptions = {}; private config: CodeEditorConfig; @@ -48,13 +48,9 @@ export class NzCodeEditorService implements OnDestroy { option$ = new BehaviorSubject(this.option); - constructor( - private readonly nzConfigService: NzConfigService, - @Inject(DOCUMENT) _document: NzSafeAny - ) { + constructor(private readonly nzConfigService: NzConfigService) { const globalConfig = this.nzConfigService.getConfigForComponent(NZ_CONFIG_MODULE_NAME); - this.document = _document; this.config = { ...globalConfig }; if (this.config.monacoEnvironment) { window.MonacoEnvironment = { ...this.config.monacoEnvironment }; diff --git a/components/code-editor/demo/complex.ts b/components/code-editor/demo/complex.ts index 3771c213694..1e58941f3a5 100644 --- a/components/code-editor/demo/complex.ts +++ b/components/code-editor/demo/complex.ts @@ -1,8 +1,7 @@ import { DOCUMENT } from '@angular/common'; -import { Component, Inject, Renderer2, ViewChild } from '@angular/core'; +import { Component, Renderer2, ViewChild, inject } from '@angular/core'; import { NzCodeEditorComponent } from 'ng-zorro-antd/code-editor'; -import { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NzTooltipDirective } from 'ng-zorro-antd/tooltip'; @Component({ @@ -76,15 +75,9 @@ export class NzDemoCodeEditorComplexComponent { } console.log(flatten(['1', 2, [[3]]]))`; - private document: Document; + private document: Document = inject(DOCUMENT); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - constructor( - @Inject(DOCUMENT) document: NzSafeAny, - private renderer: Renderer2 - ) { - this.document = document; - } + constructor(private renderer: Renderer2) {} toggleFullScreen(): void { this.fullScreen = !this.fullScreen; diff --git a/components/collapse/collapse-panel.component.ts b/components/collapse/collapse-panel.component.ts index f54c92b801a..3c31ca3a471 100644 --- a/components/collapse/collapse-panel.component.ts +++ b/components/collapse/collapse-panel.component.ts @@ -9,17 +9,16 @@ import { Component, ElementRef, EventEmitter, - Host, Input, NgZone, OnDestroy, OnInit, - Optional, Output, TemplateRef, ViewChild, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { fromEvent } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; @@ -103,13 +102,14 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy { this.cdr.markForCheck(); } + private nzCollapseComponent = inject(NzCollapseComponent, { host: true }); + noAnimation = inject(NzNoAnimationDirective, { optional: true }); + constructor( public nzConfigService: NzConfigService, private ngZone: NgZone, private cdr: ChangeDetectorRef, - private destroy$: NzDestroyService, - @Host() private nzCollapseComponent: NzCollapseComponent, - @Optional() public noAnimation?: NzNoAnimationDirective + private destroy$: NzDestroyService ) { this.nzConfigService .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME) diff --git a/components/collapse/collapse.component.ts b/components/collapse/collapse.component.ts index 16a00ae6efb..7b0aeddb2e2 100644 --- a/components/collapse/collapse.component.ts +++ b/components/collapse/collapse.component.ts @@ -10,7 +10,6 @@ import { Component, Input, OnInit, - Optional, ViewEncapsulation, booleanAttribute } from '@angular/core'; @@ -55,7 +54,7 @@ export class NzCollapseComponent implements OnInit { constructor( public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality, + private directionality: Directionality, private destroy$: NzDestroyService ) { this.nzConfigService diff --git a/components/color-picker/src/components/picker.component.ts b/components/color-picker/src/components/picker.component.ts index c365c7deef3..74d83e3bff0 100644 --- a/components/color-picker/src/components/picker.component.ts +++ b/components/color-picker/src/components/picker.component.ts @@ -10,14 +10,14 @@ import { Component, ElementRef, EventEmitter, - Inject, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Color } from '../interfaces/color'; @@ -81,6 +81,8 @@ export class PickerComponent implements OnInit, AfterViewInit, OnChanges { offsetValue: TransformOffset = { x: 0, y: 0 }; dragRef: boolean = false; + private document: Document = inject(DOCUMENT); + mouseMoveRef: (e: MouseEvent | TouchEvent) => void = () => null; mouseUpRef: (e: MouseEvent | TouchEvent) => void = () => null; @@ -92,10 +94,7 @@ export class PickerComponent implements OnInit, AfterViewInit, OnChanges { return `hsl(${this.color?.toHsb().h},100%, 50%)`; } - constructor( - private cdr: ChangeDetectorRef, - @Inject(DOCUMENT) private document: Document - ) {} + constructor(private cdr: ChangeDetectorRef) {} ngOnInit(): void { this.document.removeEventListener('mousemove', this.mouseMoveRef); diff --git a/components/color-picker/src/components/slider.component.ts b/components/color-picker/src/components/slider.component.ts index 05b500568dd..7a3ade80b87 100644 --- a/components/color-picker/src/components/slider.component.ts +++ b/components/color-picker/src/components/slider.component.ts @@ -10,14 +10,14 @@ import { Component, ElementRef, EventEmitter, - Inject, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Color } from '../interfaces/color'; @@ -90,11 +90,9 @@ export class SliderComponent implements OnInit, AfterViewInit, OnChanges { dragRef: boolean = false; mouseMoveRef: (e: MouseEvent | TouchEvent) => void = () => null; mouseUpRef: (e: MouseEvent | TouchEvent) => void = () => null; + private document: Document = inject(DOCUMENT); - constructor( - private cdr: ChangeDetectorRef, - @Inject(DOCUMENT) private document: Document - ) {} + constructor(private cdr: ChangeDetectorRef) {} ngOnInit(): void { this.document.removeEventListener('mousemove', this.mouseMoveRef); diff --git a/components/comment/comment.component.ts b/components/comment/comment.component.ts index 706cd599f67..e06061bac03 100644 --- a/components/comment/comment.component.ts +++ b/components/comment/comment.component.ts @@ -13,7 +13,6 @@ import { Input, OnDestroy, OnInit, - Optional, QueryList, TemplateRef, ViewEncapsulation @@ -81,7 +80,7 @@ export class NzCommentComponent implements OnDestroy, OnInit { @ContentChildren(CommentAction) actions!: QueryList; constructor( private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/core/config/config.service.ts b/components/core/config/config.service.ts index 3ab748f4ea5..15514300cf5 100644 --- a/components/core/config/config.service.ts +++ b/components/core/config/config.service.ts @@ -3,13 +3,13 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { CSP_NONCE, Inject, Injectable, Optional } from '@angular/core'; +import { CSP_NONCE, Injectable, inject } from '@angular/core'; import { Observable, Subject } from 'rxjs'; import { filter, mapTo } from 'rxjs/operators'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; -import { NzConfig, NzConfigKey, NZ_CONFIG } from './config'; +import { NZ_CONFIG, NzConfig, NzConfigKey } from './config'; import { registerTheme } from './css-variables'; const isDefined = function (value?: NzSafeAny): boolean { @@ -25,20 +25,14 @@ export class NzConfigService { private configUpdated$ = new Subject(); /** Global config holding property. */ - private readonly config: NzConfig; + private readonly config: NzConfig = inject(NZ_CONFIG, { optional: true }) || {}; - private readonly cspNonce?: string | null; - - constructor( - @Optional() @Inject(NZ_CONFIG) defaultConfig?: NzConfig, - @Optional() @Inject(CSP_NONCE) cspNonce?: string | null - ) { - this.config = defaultConfig || {}; - this.cspNonce = cspNonce; + private readonly cspNonce: string | null = inject(CSP_NONCE, { optional: true }); + constructor() { if (this.config.theme) { // If theme is set with NZ_CONFIG, register theme to make sure css variables work - registerTheme(this.getConfig().prefixCls?.prefixCls || defaultPrefixCls, this.config.theme, cspNonce); + registerTheme(this.getConfig().prefixCls?.prefixCls || defaultPrefixCls, this.config.theme, this.cspNonce); } } diff --git a/components/core/services/image-preload.ts b/components/core/services/image-preload.ts index c8174504688..727cc5ba420 100644 --- a/components/core/services/image-preload.ts +++ b/components/core/services/image-preload.ts @@ -5,9 +5,7 @@ import { Platform } from '@angular/cdk/platform'; import { DOCUMENT } from '@angular/common'; -import { Inject, Injectable } from '@angular/core'; - -import { NzSafeAny } from 'ng-zorro-antd/core/types'; +import { Injectable, inject } from '@angular/core'; interface PreloadOption { src: string; @@ -22,11 +20,9 @@ export type PreloadDisposeHandle = () => void; export class ImagePreloadService { private counter = new Map(); private linkRefs = new Map(); + private document: Document = inject(DOCUMENT); - constructor( - @Inject(DOCUMENT) private document: NzSafeAny, - private platform: Platform - ) {} + constructor(private platform: Platform) {} addPreload(option: PreloadOption): PreloadDisposeHandle { if (this.platform.isBrowser) { diff --git a/components/core/services/scroll.ts b/components/core/services/scroll.ts index a66b0f54bda..90fc3a673da 100644 --- a/components/core/services/scroll.ts +++ b/components/core/services/scroll.ts @@ -4,7 +4,7 @@ */ import { DOCUMENT } from '@angular/common'; -import { Inject, Injectable, NgZone } from '@angular/core'; +import { Injectable, NgZone, inject } from '@angular/core'; import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; @@ -34,14 +34,9 @@ export interface NzScrollToOptions { providedIn: 'root' }) export class NzScrollService { - private doc: Document; + private doc: Document = inject(DOCUMENT); - constructor( - private ngZone: NgZone, - @Inject(DOCUMENT) doc: NzSafeAny - ) { - this.doc = doc; - } + constructor(private ngZone: NgZone) {} /** Set the position of the scroll bar of `el`. */ setScrollTop(el: Element | Window, topValue: number = 0): void { diff --git a/components/core/wave/nz-wave.directive.ts b/components/core/wave/nz-wave.directive.ts index 62856b5fe24..74f0cddbafb 100644 --- a/components/core/wave/nz-wave.directive.ts +++ b/components/core/wave/nz-wave.directive.ts @@ -7,21 +7,18 @@ import { CSP_NONCE, Directive, ElementRef, - Inject, + EnvironmentProviders, InjectionToken, Input, - makeEnvironmentProviders, - EnvironmentProviders, NgZone, OnDestroy, OnInit, - Optional, - PLATFORM_ID + PLATFORM_ID, + inject, + makeEnvironmentProviders } from '@angular/core'; import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations'; -import { NzSafeAny } from 'ng-zorro-antd/core/types'; - import { NzWaveRenderer } from './nz-wave-renderer'; export interface NzWaveConfig { @@ -57,13 +54,14 @@ export class NzWaveDirective implements OnInit, OnDestroy { return this.waveRenderer; } + private cspNonce = inject(CSP_NONCE, { optional: true }); + private platformId = inject(PLATFORM_ID); + private config = inject(NZ_WAVE_GLOBAL_CONFIG, { optional: true }); + private animationType = inject(ANIMATION_MODULE_TYPE, { optional: true }); + constructor( private ngZone: NgZone, - private elementRef: ElementRef, - @Optional() @Inject(NZ_WAVE_GLOBAL_CONFIG) private config: NzWaveConfig, - @Optional() @Inject(ANIMATION_MODULE_TYPE) private animationType: string, - @Inject(PLATFORM_ID) private platformId: NzSafeAny, - @Optional() @Inject(CSP_NONCE) private cspNonce?: string | null + private elementRef: ElementRef ) { this.waveDisabled = this.isConfigDisabled(); } diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts index dab64196b27..52c8869c891 100644 --- a/components/date-picker/date-picker.component.ts +++ b/components/date-picker/date-picker.component.ts @@ -22,13 +22,10 @@ import { Component, ElementRef, EventEmitter, - Host, - Inject, Input, NgZone, OnChanges, OnInit, - Optional, Output, QueryList, Renderer2, @@ -38,7 +35,8 @@ import { ViewChildren, ViewEncapsulation, booleanAttribute, - forwardRef + forwardRef, + inject } from '@angular/core'; import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; import { fromEvent, of as observableOf } from 'rxjs'; @@ -348,8 +346,8 @@ export class NzDatePickerComponent implements OnInit, OnChanges, AfterViewInit, @ViewChild('pickerInput', { static: false }) pickerInput?: ElementRef; @ViewChildren('rangePickerInput') rangePickerInputs?: QueryList>; + private document: Document = inject(DOCUMENT); origin: CdkOverlayOrigin; - document: Document; inputSize: number = 12; inputWidth?: number; prefixCls = PREFIX_CLASS; @@ -606,6 +604,10 @@ export class NzDatePickerComponent implements OnInit, OnChanges, AfterViewInit, return this.nzOpen !== undefined; } + noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); + private nzFormStatusService = inject(NzFormStatusService, { optional: true }); + private nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); + // ------------------------------------------------------------------------ // Input API End // ------------------------------------------------------------------------ @@ -622,13 +624,8 @@ export class NzDatePickerComponent implements OnInit, OnChanges, AfterViewInit, private nzResizeObserver: NzResizeObserver, private platform: Platform, private destroy$: NzDestroyService, - @Inject(DOCUMENT) doc: NzSafeAny, - @Optional() private directionality: Directionality, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective, - @Optional() private nzFormStatusService?: NzFormStatusService, - @Optional() private nzFormNoStatusService?: NzFormNoStatusService + private directionality: Directionality ) { - this.document = doc; this.origin = new CdkOverlayOrigin(this.elementRef); } diff --git a/components/date-picker/month-picker.component.ts b/components/date-picker/month-picker.component.ts index 8fd0675406d..03314ee11b6 100644 --- a/components/date-picker/month-picker.component.ts +++ b/components/date-picker/month-picker.component.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directive, Host, Optional } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { NzDatePickerComponent } from './date-picker.component'; @@ -14,7 +14,9 @@ import { NzDatePickerComponent } from './date-picker.component'; }) // eslint-disable-next-line @angular-eslint/directive-class-suffix export class NzMonthPickerComponent { - constructor(@Optional() @Host() public datePicker: NzDatePickerComponent) { + datePicker = inject(NzDatePickerComponent, { host: true }); + + constructor() { this.datePicker.nzMode = 'month'; } } diff --git a/components/date-picker/quarter-picker.component.ts b/components/date-picker/quarter-picker.component.ts index 31e44888e5c..d77e727f41a 100644 --- a/components/date-picker/quarter-picker.component.ts +++ b/components/date-picker/quarter-picker.component.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directive, Host, Optional } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { NzDatePickerComponent } from './date-picker.component'; @@ -13,7 +13,9 @@ import { NzDatePickerComponent } from './date-picker.component'; standalone: true }) export class NzQuarterPickerComponent { - constructor(@Optional() @Host() public datePicker: NzDatePickerComponent) { + datePicker = inject(NzDatePickerComponent, { host: true }); + + constructor() { this.datePicker.nzMode = 'quarter'; } } diff --git a/components/date-picker/range-picker.component.ts b/components/date-picker/range-picker.component.ts index 73449810838..8fbb6bbbb0c 100644 --- a/components/date-picker/range-picker.component.ts +++ b/components/date-picker/range-picker.component.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directive, Host, Optional } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { NzDatePickerComponent } from './date-picker.component'; @@ -14,7 +14,9 @@ import { NzDatePickerComponent } from './date-picker.component'; }) // eslint-disable-next-line @angular-eslint/directive-class-suffix export class NzRangePickerComponent { - constructor(@Optional() @Host() public datePicker: NzDatePickerComponent) { + datePicker = inject(NzDatePickerComponent, { host: true }); + + constructor() { this.datePicker.isRange = true; } } diff --git a/components/date-picker/week-picker.component.ts b/components/date-picker/week-picker.component.ts index 01816535fc3..a54d017cc53 100644 --- a/components/date-picker/week-picker.component.ts +++ b/components/date-picker/week-picker.component.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directive, Host, Optional } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { NzDatePickerComponent } from './date-picker.component'; @@ -14,7 +14,9 @@ import { NzDatePickerComponent } from './date-picker.component'; }) // eslint-disable-next-line @angular-eslint/directive-class-suffix export class NzWeekPickerComponent { - constructor(@Optional() @Host() public datePicker: NzDatePickerComponent) { + datePicker = inject(NzDatePickerComponent, { host: true }); + + constructor() { this.datePicker.nzMode = 'week'; } } diff --git a/components/date-picker/year-picker.component.ts b/components/date-picker/year-picker.component.ts index 3d4431beafd..aff0d756071 100644 --- a/components/date-picker/year-picker.component.ts +++ b/components/date-picker/year-picker.component.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directive, Host, Optional } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { NzDatePickerComponent } from './date-picker.component'; @@ -14,7 +14,9 @@ import { NzDatePickerComponent } from './date-picker.component'; }) // eslint-disable-next-line @angular-eslint/directive-class-suffix export class NzYearPickerComponent { - constructor(@Optional() @Host() public datePicker: NzDatePickerComponent) { + datePicker = inject(NzDatePickerComponent, { host: true }); + + constructor() { this.datePicker.nzMode = 'year'; } } diff --git a/components/descriptions/descriptions.component.ts b/components/descriptions/descriptions.component.ts index 8eea8a77c41..0a76ed6d44a 100644 --- a/components/descriptions/descriptions.component.ts +++ b/components/descriptions/descriptions.component.ts @@ -15,7 +15,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, QueryList, SimpleChanges, TemplateRef, @@ -187,7 +186,7 @@ export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterConte public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef, private breakpointService: NzBreakpointService, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { this.dir = this.directionality.value; diff --git a/components/drawer/demo/service.ts b/components/drawer/demo/service.ts index 6c0d68e50bd..f6719e5acf5 100644 --- a/components/drawer/demo/service.ts +++ b/components/drawer/demo/service.ts @@ -1,6 +1,6 @@ /* declarations: NzDrawerCustomComponent */ -import { Component, Inject, TemplateRef, ViewChild } from '@angular/core'; +import { Component, TemplateRef, ViewChild, inject } from '@angular/core'; import { NZ_DRAWER_DATA, NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer'; @@ -91,11 +91,9 @@ export class NzDemoDrawerServiceComponent { }) export class NzDrawerCustomComponent { // @Input() value = ''; + nzData: { value: string } = inject(NZ_DRAWER_DATA); - constructor( - private drawerRef: NzDrawerRef, - @Inject(NZ_DRAWER_DATA) public nzData: { value: string } - ) {} + constructor(private drawerRef: NzDrawerRef) {} close(): void { this.drawerRef.close(this.nzData); diff --git a/components/drawer/drawer.component.ts b/components/drawer/drawer.component.ts index d35032cd6c6..b986d21af94 100644 --- a/components/drawer/drawer.component.ts +++ b/components/drawer/drawer.component.ts @@ -17,13 +17,11 @@ import { ComponentRef, ContentChild, EventEmitter, - Inject, Injector, Input, OnChanges, OnDestroy, OnInit, - Optional, Output, Renderer2, SimpleChanges, @@ -31,7 +29,8 @@ import { Type, ViewChild, ViewContainerRef, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Observable, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -286,11 +285,10 @@ export class NzDrawerComponent { fixture.detectChanges(); }); - beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => { - overlayContainer = oc; - overlayContainerElement = oc.getContainerElement(); - forceScrollElement = document.createElement('div'); - document.body.appendChild(forceScrollElement); - forceScrollElement.style.width = '100px'; - forceScrollElement.style.height = '3000px'; - forceScrollElement.style.background = 'rebeccapurple'; - })); + beforeEach( + testingInject([OverlayContainer], (oc: OverlayContainer) => { + overlayContainer = oc; + overlayContainerElement = oc.getContainerElement(); + forceScrollElement = document.createElement('div'); + document.body.appendChild(forceScrollElement); + forceScrollElement.style.width = '100px'; + forceScrollElement.style.height = '3000px'; + forceScrollElement.style.background = 'rebeccapurple'; + }) + ); afterEach(fakeAsync(() => { component.close(); @@ -642,9 +651,11 @@ describe('NzDrawerComponent', () => { fixture.detectChanges(); }); - beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => { - overlayContainerElement = oc.getContainerElement(); - })); + beforeEach( + testingInject([OverlayContainer], (oc: OverlayContainer) => { + overlayContainerElement = oc.getContainerElement(); + }) + ); it('should className correct on dir change', () => { component.open(); @@ -682,11 +693,13 @@ describe('NzDrawerService', () => { fixture.detectChanges(); })); - beforeEach(inject([OverlayContainer, NzDrawerService], (oc: OverlayContainer, ds: NzDrawerService) => { - overlayContainer = oc; - drawerService = ds; - overlayContainerElement = oc.getContainerElement(); - })); + beforeEach( + testingInject([OverlayContainer, NzDrawerService], (oc: OverlayContainer, ds: NzDrawerService) => { + overlayContainer = oc; + drawerService = ds; + overlayContainerElement = oc.getContainerElement(); + }) + ); afterEach(() => { overlayContainer.ngOnDestroy(); @@ -902,11 +915,9 @@ class NzTestDrawerWithServiceComponent { }) export class NzDrawerCustomComponent { @Input() value: any; // eslint-disable-line @typescript-eslint/no-explicit-any + nzData: { value: string } = inject(NZ_DRAWER_DATA); - constructor( - @Inject(NZ_DRAWER_DATA) public nzData: { value: string }, - private drawerRef: NzDrawerRef - ) {} + constructor(private drawerRef: NzDrawerRef) {} close(): void { this.drawerRef.close(this.value); diff --git a/components/dropdown/dropdown-button.directive.ts b/components/dropdown/dropdown-button.directive.ts index c742307cc97..8f4e3c18809 100644 --- a/components/dropdown/dropdown-button.directive.ts +++ b/components/dropdown/dropdown-button.directive.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { AfterViewInit, Directive, ElementRef, Host, Optional, Renderer2 } from '@angular/core'; +import { AfterViewInit, Directive, ElementRef, Renderer2, inject } from '@angular/core'; import { NzButtonGroupComponent } from 'ng-zorro-antd/button'; @@ -12,9 +12,10 @@ import { NzButtonGroupComponent } from 'ng-zorro-antd/button'; standalone: true }) export class NzDropdownButtonDirective implements AfterViewInit { + private nzButtonGroupComponent = inject(NzButtonGroupComponent, { host: true, optional: true }); + constructor( private renderer: Renderer2, - @Host() @Optional() private nzButtonGroupComponent: NzButtonGroupComponent, private elementRef: ElementRef ) {} ngAfterViewInit(): void { diff --git a/components/dropdown/dropdown-menu.component.ts b/components/dropdown/dropdown-menu.component.ts index 923792e267a..0c8263c2a75 100644 --- a/components/dropdown/dropdown-menu.component.ts +++ b/components/dropdown/dropdown-menu.component.ts @@ -13,15 +13,14 @@ import { Component, ElementRef, EventEmitter, - Host, OnDestroy, OnInit, - Optional, Renderer2, TemplateRef, ViewChild, ViewContainerRef, - ViewEncapsulation + ViewEncapsulation, + inject } from '@angular/core'; import { BehaviorSubject, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -94,14 +93,15 @@ export class NzDropdownMenuComponent implements AfterContentInit, OnDestroy, OnI this.cdr.markForCheck(); } + noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); + constructor( private cdr: ChangeDetectorRef, private elementRef: ElementRef, private renderer: Renderer2, public viewContainerRef: ViewContainerRef, public nzMenuService: MenuService, - @Optional() private directionality: Directionality, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective + private directionality: Directionality ) {} ngOnInit(): void { this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => { diff --git a/components/empty/empty.spec.ts b/components/empty/empty.spec.ts index c141980b669..360e4fda759 100644 --- a/components/empty/empty.spec.ts +++ b/components/empty/empty.spec.ts @@ -1,9 +1,9 @@ import { CommonModule } from '@angular/common'; -import { Component, DebugElement, Inject, NgModule, TemplateRef, ViewChild } from '@angular/core'; -import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { Component, DebugElement, NgModule, TemplateRef, ViewChild, inject } from '@angular/core'; +import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NzConfigService, NZ_CONFIG } from 'ng-zorro-antd/core/config'; +import { NZ_CONFIG, NzConfigService } from 'ng-zorro-antd/core/config'; import { ComponentBed, createComponentBed } from '../core/testing/component-bed'; import { NzI18nService } from '../i18n'; @@ -312,7 +312,7 @@ export class NzEmptyTestServiceComponent { template: `
I'm in component {{ name }}
` }) export class NzEmptyTestCustomComponent { - constructor(@Inject(NZ_EMPTY_COMPONENT_NAME) public name: string) {} + name = inject(NZ_EMPTY_COMPONENT_NAME); } @NgModule({ diff --git a/components/form/form-control.component.ts b/components/form/form-control.component.ts index 32b4bc9d656..f5a4988d73b 100644 --- a/components/form/form-control.component.ts +++ b/components/form/form-control.component.ts @@ -10,16 +10,15 @@ import { ChangeDetectorRef, Component, ContentChild, - Host, Input, OnChanges, OnDestroy, OnInit, - Optional, SimpleChanges, TemplateRef, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { AbstractControl, FormControlDirective, FormControlName, NgControl, NgModel } from '@angular/forms'; import { Observable, Subject, Subscription } from 'rxjs'; @@ -82,7 +81,7 @@ export class NzFormControlComponent implements OnChanges, OnDestroy, OnInit, Aft private get disableAutoTips(): boolean { return this.nzDisableAutoTips !== undefined ? toBoolean(this.nzDisableAutoTips) - : this.nzFormDirective?.nzDisableAutoTips; + : !!this.nzFormDirective?.nzDisableAutoTips; } status: NzFormControlStatusType = ''; @@ -225,7 +224,7 @@ export class NzFormControlComponent implements OnChanges, OnDestroy, OnInit, Aft } } - private subscribeAutoTips(observable: Observable): void { + private subscribeAutoTips(observable?: Observable): void { observable?.pipe(takeUntil(this.destroyed$)).subscribe(() => { if (!this.disableAutoTips) { this.updateAutoErrorTip(); @@ -235,11 +234,12 @@ export class NzFormControlComponent implements OnChanges, OnDestroy, OnInit, Aft }); } + private nzFormItemComponent = inject(NzFormItemComponent, { host: true, optional: true }); + private nzFormDirective = inject(NzFormDirective, { optional: true }); + constructor( - @Optional() @Host() private nzFormItemComponent: NzFormItemComponent, private cdr: ChangeDetectorRef, i18n: NzI18nService, - @Optional() private nzFormDirective: NzFormDirective, private nzFormStatusService: NzFormStatusService ) { this.subscribeAutoTips(i18n.localeChange.pipe(tap(locale => (this.localeId = locale.locale)))); diff --git a/components/form/form-label.component.ts b/components/form/form-label.component.ts index 970a9d822e4..4d1cb0ebb4a 100644 --- a/components/form/form-label.component.ts +++ b/components/form/form-label.component.ts @@ -9,10 +9,9 @@ import { Component, Input, OnDestroy, - Optional, - SkipSelf, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Subject } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; @@ -70,7 +69,7 @@ export class NzFormLabelComponent implements OnDestroy { this.noColon = value; } get nzNoColon(): boolean { - return this.noColon !== 'default' ? this.noColon : this.nzFormDirective?.nzNoColon; + return this.noColon !== 'default' ? this.noColon : !!this.nzFormDirective?.nzNoColon; } private noColon: boolean | 'default' = 'default'; @@ -105,17 +104,16 @@ export class NzFormLabelComponent implements OnDestroy { } get nzLabelWrap(): boolean { - return this.labelWrap !== 'default' ? this.labelWrap : this.nzFormDirective?.nzLabelWrap; + return this.labelWrap !== 'default' ? this.labelWrap : !!this.nzFormDirective?.nzLabelWrap; } private labelWrap: boolean | 'default' = 'default'; private destroy$ = new Subject(); - constructor( - private cdr: ChangeDetectorRef, - @Optional() @SkipSelf() private nzFormDirective: NzFormDirective - ) { + private nzFormDirective = inject(NzFormDirective, { skipSelf: true, optional: true }); + + constructor(private cdr: ChangeDetectorRef) { if (this.nzFormDirective) { this.nzFormDirective .getInputObservable('nzNoColon') diff --git a/components/form/form.directive.ts b/components/form/form.directive.ts index 3337e9b6ddb..9c199ffb6c2 100644 --- a/components/form/form.directive.ts +++ b/components/form/form.directive.ts @@ -4,16 +4,7 @@ */ import { Direction, Directionality } from '@angular/cdk/bidi'; -import { - Directive, - Input, - OnChanges, - OnDestroy, - Optional, - SimpleChange, - SimpleChanges, - booleanAttribute -} from '@angular/core'; +import { Directive, Input, OnChanges, OnDestroy, SimpleChange, SimpleChanges, booleanAttribute } from '@angular/core'; import { Observable, Subject } from 'rxjs'; import { filter, map, takeUntil } from 'rxjs/operators'; @@ -69,7 +60,7 @@ export class NzFormDirective implements OnChanges, OnDestroy, InputObservable { constructor( public nzConfigService: NzConfigService, - @Optional() private directionality: Directionality + private directionality: Directionality ) { this.dir = this.directionality.value; this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => { diff --git a/components/graph/graph.component.ts b/components/graph/graph.component.ts index 76b6c3e940b..09c5e24ffa7 100644 --- a/components/graph/graph.component.ts +++ b/components/graph/graph.component.ts @@ -12,19 +12,18 @@ import { ContentChild, ElementRef, EventEmitter, - Host, Input, OnChanges, OnDestroy, OnInit, - Optional, Output, QueryList, SimpleChanges, TemplateRef, ViewChildren, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Observable, ReplaySubject, Subject, Subscription, forkJoin } from 'rxjs'; import { finalize, take, takeUntil } from 'rxjs/operators'; @@ -183,11 +182,12 @@ export class NzGraphComponent implements OnInit, OnChanges, AfterContentChecked, coreTransform = (node: NzGraphGroupNode): string => `translate(0, ${node.parentNodeName ? node.labelHeight : 0})`; + noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); + nzGraphZoom = inject(NzGraphZoomDirective, { optional: true }); + constructor( private cdr: ChangeDetectorRef, - private elementRef: ElementRef, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective, - @Optional() public nzGraphZoom?: NzGraphZoomDirective + private elementRef: ElementRef ) {} ngOnInit(): void { diff --git a/components/grid/col.directive.ts b/components/grid/col.directive.ts index 85b64b0b316..969c2837fe3 100644 --- a/components/grid/col.directive.ts +++ b/components/grid/col.directive.ts @@ -8,14 +8,13 @@ import { AfterViewInit, Directive, ElementRef, - Host, Input, OnChanges, OnDestroy, OnInit, - Optional, Renderer2, - SimpleChanges + SimpleChanges, + inject } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -120,11 +119,12 @@ export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestr return listClassMap; } + nzRowDirective = inject(NzRowDirective, { host: true, optional: true }); + constructor( private elementRef: ElementRef, - @Optional() @Host() public nzRowDirective: NzRowDirective, public renderer: Renderer2, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/grid/row.directive.ts b/components/grid/row.directive.ts index 06c28f86f49..971ab0226e7 100644 --- a/components/grid/row.directive.ts +++ b/components/grid/row.directive.ts @@ -15,7 +15,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Renderer2, SimpleChanges } from '@angular/core'; @@ -98,7 +97,7 @@ export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestr public ngZone: NgZone, public platform: Platform, private breakpointService: NzBreakpointService, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/i18n/date-helper.service.ts b/components/i18n/date-helper.service.ts index c97d40533b8..6f69029157e 100644 --- a/components/i18n/date-helper.service.ts +++ b/components/i18n/date-helper.service.ts @@ -4,9 +4,9 @@ */ import { formatDate } from '@angular/common'; -import { Inject, Injectable, Optional, inject } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; -import { format as fnsFormat, getISOWeek as fnsGetISOWeek, getQuarter, parse as fnsParse } from 'date-fns'; +import { format as fnsFormat, getISOWeek as fnsGetISOWeek, parse as fnsParse, getQuarter } from 'date-fns'; import { WeekDayIndex, ɵNgTimeParser } from 'ng-zorro-antd/core/time'; @@ -15,8 +15,7 @@ import { NzI18nService } from './nz-i18n.service'; export function DATE_HELPER_SERVICE_FACTORY(): DateHelperService { const i18n = inject(NzI18nService); - const config = inject(NZ_DATE_CONFIG, { optional: true }); - return i18n.getDateLocale() ? new DateHelperByDateFns(i18n, config) : new DateHelperByDatePipe(i18n, config); + return i18n.getDateLocale() ? new DateHelperByDateFns(i18n) : new DateHelperByDatePipe(i18n); } /** @@ -28,14 +27,9 @@ export function DATE_HELPER_SERVICE_FACTORY(): DateHelperService { useFactory: DATE_HELPER_SERVICE_FACTORY }) export abstract class DateHelperService { - protected config: NzDateConfig; + protected config: NzDateConfig = mergeDateConfig(inject(NZ_DATE_CONFIG, { optional: true })); - constructor( - protected i18n: NzI18nService, - @Optional() @Inject(NZ_DATE_CONFIG) config: NzDateConfig | null - ) { - this.config = mergeDateConfig(config); - } + constructor(protected i18n: NzI18nService) {} abstract getISOWeek(date: Date): number; abstract getFirstDayOfWeek(): WeekDayIndex; diff --git a/components/i18n/nz-i18n.service.spec.ts b/components/i18n/nz-i18n.service.spec.ts index 6122b0bd37f..dcd955f390d 100644 --- a/components/i18n/nz-i18n.service.spec.ts +++ b/components/i18n/nz-i18n.service.spec.ts @@ -1,5 +1,5 @@ -import { Component, Inject, OnDestroy } from '@angular/core'; -import { ComponentFixture, inject, TestBed } from '@angular/core/testing'; +import { Component, inject, OnDestroy } from '@angular/core'; +import { ComponentFixture, TestBed, inject as testingInject } from '@angular/core/testing'; import { Subscription } from 'rxjs'; import { NZ_I18N, provideNzI18n } from 'ng-zorro-antd/i18n/nz-i18n.token'; @@ -33,9 +33,11 @@ describe('i18n service', () => { testComponent = fixture.debugElement.componentInstance; }); - beforeEach(inject([NzI18nService], (s: NzI18nService) => { - srv = s; - })); + beforeEach( + testingInject([NzI18nService], (s: NzI18nService) => { + srv = s; + }) + ); it('should interface be right', () => { const i18nEN: NzI18nInterface = en_US; @@ -88,11 +90,9 @@ https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md` }) export class NzI18nTestComponent implements OnDestroy { private localeSubscription: Subscription; + locale = inject(NZ_I18N); - constructor( - private nzI18nService: NzI18nService, - @Inject(NZ_I18N) public locale: NzI18nInterface - ) { + constructor(private nzI18nService: NzI18nService) { this.localeSubscription = this.nzI18nService.localeChange.subscribe(locale => { this.updateLocale(locale); }); diff --git a/components/i18n/nz-i18n.service.ts b/components/i18n/nz-i18n.service.ts index f621bacbe70..cd28767d02f 100644 --- a/components/i18n/nz-i18n.service.ts +++ b/components/i18n/nz-i18n.service.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Inject, Injectable, Optional } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; import { warn } from 'ng-zorro-antd/core/logger'; @@ -26,12 +26,9 @@ export class NzI18nService { return this._change.asObservable(); } - constructor( - @Optional() @Inject(NZ_I18N) locale: NzI18nInterface, - @Optional() @Inject(NZ_DATE_LOCALE) dateLocale: DateLocale - ) { - this.setLocale(locale || zh_CN); - this.setDateLocale(dateLocale || null); + constructor() { + this.setLocale(inject(NZ_I18N, { optional: true }) || zh_CN); + this.setDateLocale(inject(NZ_DATE_LOCALE, { optional: true }) as DateLocale); // TODO: fix the type } // [NOTE] Performance issue: this method may called by every change detections diff --git a/components/icon/icon.directive.ts b/components/icon/icon.directive.ts index 0ff4a8adf7e..2f8d415aa2f 100644 --- a/components/icon/icon.directive.ts +++ b/components/icon/icon.directive.ts @@ -13,10 +13,10 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Renderer2, SimpleChanges, booleanAttribute, + inject, numberAttribute } from '@angular/core'; import { Subject, from } from 'rxjs'; @@ -78,11 +78,11 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, private readonly changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, public readonly iconService: NzIconService, - public readonly renderer: Renderer2, - @Optional() iconPatch: NzIconPatchService + public readonly renderer: Renderer2 ) { super(iconService, elementRef, renderer); + const iconPatch = inject(NzIconPatchService, { optional: true }); if (iconPatch) { iconPatch.doPatch(); } diff --git a/components/icon/icon.service.ts b/components/icon/icon.service.ts index 83b41e0c113..49069b061fd 100644 --- a/components/icon/icon.service.ts +++ b/components/icon/icon.service.ts @@ -6,7 +6,7 @@ import { Platform } from '@angular/cdk/platform'; import { DOCUMENT } from '@angular/common'; import { HttpBackend } from '@angular/common/http'; -import { Inject, Injectable, InjectionToken, OnDestroy, Optional, RendererFactory2, Self } from '@angular/core'; +import { Injectable, InjectionToken, OnDestroy, RendererFactory2, inject } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { Subject, Subscription } from 'rxjs'; @@ -14,7 +14,6 @@ import { IconDefinition, IconService } from '@ant-design/icons-angular'; import { IconConfig, NzConfigService } from 'ng-zorro-antd/core/config'; import { warn } from 'ng-zorro-antd/core/logger'; -import { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NZ_ICONS_USED_BY_ZORRO } from './icons'; @@ -22,7 +21,7 @@ export interface NzIconfontOption { scriptUrl: string; } -export const NZ_ICONS = new InjectionToken('nz_icons'); +export const NZ_ICONS = new InjectionToken('nz_icons'); export const NZ_ICON_DEFAULT_TWOTONE_COLOR = new InjectionToken('nz_icon_default_twotone_color'); export const DEFAULT_TWOTONE_COLOR = '#1890ff'; @@ -81,12 +80,15 @@ export class NzIconService extends IconService implements OnDestroy { rendererFactory: RendererFactory2, sanitizer: DomSanitizer, protected nzConfigService: NzConfigService, - private platform: Platform, - @Optional() handler: HttpBackend, - @Optional() @Inject(DOCUMENT) _document: NzSafeAny, - @Optional() @Inject(NZ_ICONS) icons?: IconDefinition[] + private platform: Platform ) { - super(rendererFactory, handler, _document, sanitizer, [...NZ_ICONS_USED_BY_ZORRO, ...(icons || [])]); + super( + rendererFactory, + inject(HttpBackend, { optional: true }) as HttpBackend, // TODO: fix the type + inject(DOCUMENT), + sanitizer, + [...NZ_ICONS_USED_BY_ZORRO, ...(inject(NZ_ICONS, { optional: true }) || [])] + ); this.onConfigChange(); this.configDefaultTwotoneColor(); @@ -128,16 +130,14 @@ export class NzIconService extends IconService implements OnDestroy { } } -export const NZ_ICONS_PATCH = new InjectionToken('nz_icons_patch'); +export const NZ_ICONS_PATCH = new InjectionToken('nz_icons_patch'); @Injectable() export class NzIconPatchService { patched = false; + private extraIcons = inject(NZ_ICONS_PATCH, { self: true }); - constructor( - @Self() @Inject(NZ_ICONS_PATCH) private extraIcons: IconDefinition[], - private rootIconService: NzIconService - ) {} + constructor(private rootIconService: NzIconService) {} doPatch(): void { if (this.patched) { diff --git a/components/icon/page/index.ts b/components/icon/page/index.ts index 65899267833..d548e621830 100644 --- a/components/icon/page/index.ts +++ b/components/icon/page/index.ts @@ -6,7 +6,7 @@ import { DOCUMENT, isPlatformBrowser } from '@angular/common'; import { Component, - Inject, + inject, Input, OnDestroy, OnInit, @@ -482,6 +482,8 @@ export class NzPageDemoIconComponent implements OnInit, OnDestroy { fileList: NzUploadFile[] = []; icons: Icon[] = []; + private document: Document = inject(DOCUMENT); + trackByFn = (item: string): string => `${item}-${this.currentTheme}`; kebabCase = (str: string): string => kebabCase(str); @@ -506,14 +508,14 @@ export class NzPageDemoIconComponent implements OnInit, OnDestroy { const promise = new Promise((resolve): void => { let copyTextArea: HTMLTextAreaElement | null = null; try { - copyTextArea = this.dom.createElement('textarea') as HTMLTextAreaElement; + copyTextArea = this.document.createElement('textarea') as HTMLTextAreaElement; copyTextArea.style.height = '0px'; copyTextArea.style.opacity = '0'; copyTextArea.style.width = '0px'; - this.dom.body.appendChild(copyTextArea); + this.document.body.appendChild(copyTextArea); copyTextArea.value = value; copyTextArea.select(); - this.dom.execCommand('copy'); + this.document.execCommand('copy'); resolve(value); } finally { if (copyTextArea && copyTextArea.parentNode) { @@ -574,7 +576,7 @@ export class NzPageDemoIconComponent implements OnInit, OnDestroy { return; } - const script = this.dom.createElement('script'); + const script = this.document.createElement('script'); const source = 'https://cdn.jsdelivr.net/gh/lewis617/antd-icon-classifier@0.0/dist/main.js'; script.type = 'text/javascript'; script.src = source; @@ -586,12 +588,12 @@ export class NzPageDemoIconComponent implements OnInit, OnDestroy { throw new Error(`${PREFIX} cannot load assets of antd icon classifier from source "${source}".`); }; - this.dom.head.appendChild(script); + this.document.head.appendChild(script); } private onLoad(): void { this.modelLoaded = true; - this.dom.addEventListener('paste', this.onPaste as EventListener); + this.document.addEventListener('paste', this.onPaste as EventListener); } private onPaste = (event: ClipboardEvent): void => { @@ -670,11 +672,9 @@ export class NzPageDemoIconComponent implements OnInit, OnDestroy { } } + private platformId = inject(PLATFORM_ID); + constructor( - /* eslint-disable @typescript-eslint/no-explicit-any */ - @Inject(DOCUMENT) private dom: any, - @Inject(PLATFORM_ID) private platformId: any, - /* eslint-enable @typescript-eslint/no-explicit-any */ private _iconService: NzIconService, private message: NzMessageService, private viewContainerRef: ViewContainerRef @@ -693,7 +693,7 @@ export class NzPageDemoIconComponent implements OnInit, OnDestroy { } ngOnDestroy(): void { - this.dom.removeEventListener('paste', this.onPaste as EventListener); + this.document.removeEventListener('paste', this.onPaste as EventListener); this.viewContainerRef.clear(); } } diff --git a/components/image/image.directive.ts b/components/image/image.directive.ts index 216886fb6a8..cdd2a67b28a 100644 --- a/components/image/image.directive.ts +++ b/components/image/image.directive.ts @@ -9,20 +9,18 @@ import { ChangeDetectorRef, Directive, ElementRef, - Inject, Input, OnChanges, OnDestroy, OnInit, - Optional, SimpleChanges, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Subject, fromEvent } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; -import { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NzImageGroupComponent } from './image-group.component'; import { NZ_DEFAULT_SCALE_STEP } from './image-preview.component'; @@ -57,19 +55,19 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { status: ImageStatusType = 'normal'; private backLoadDestroy$: Subject = new Subject(); private destroy$: Subject = new Subject(); + private document: Document = inject(DOCUMENT); + private parentGroup = inject(NzImageGroupComponent, { optional: true }); get previewable(): boolean { return !this.nzDisablePreview && this.status !== 'error'; } constructor( - @Inject(DOCUMENT) private document: NzSafeAny, public nzConfigService: NzConfigService, private elementRef: ElementRef, private nzImageService: NzImageService, protected cdr: ChangeDetectorRef, - @Optional() private parentGroup: NzImageGroupComponent, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { @@ -105,7 +103,7 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { previewAbleImages.forEach(imageDirective => { scaleStepMap.set( imageDirective.nzSrc ?? imageDirective.nzSrcset, - imageDirective.nzScaleStep ?? this.parentGroup.nzScaleStep ?? this.nzScaleStep ?? NZ_DEFAULT_SCALE_STEP + imageDirective.nzScaleStep ?? this.parentGroup!.nzScaleStep ?? this.nzScaleStep ?? NZ_DEFAULT_SCALE_STEP ); }); const previewRef = this.nzImageService.preview( diff --git a/components/image/image.service.ts b/components/image/image.service.ts index 152302feba0..fc9bb4a961c 100644 --- a/components/image/image.service.ts +++ b/components/image/image.service.ts @@ -6,7 +6,7 @@ import { Directionality } from '@angular/cdk/bidi'; import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal'; -import { Injectable, Injector, Optional } from '@angular/core'; +import { Injectable, Injector } from '@angular/core'; import { ImageConfig, NzConfigService } from 'ng-zorro-antd/core/config'; @@ -26,7 +26,7 @@ export class NzImageService { private overlay: Overlay, private injector: Injector, private nzConfigService: NzConfigService, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} preview( diff --git a/components/input-number/input-number-group.component.ts b/components/input-number/input-number-group.component.ts index fe7a98440d7..2731e297f4a 100644 --- a/components/input-number/input-number-group.component.ts +++ b/components/input-number/input-number-group.component.ts @@ -18,13 +18,13 @@ import { OnChanges, OnDestroy, OnInit, - Optional, QueryList, Renderer2, SimpleChanges, TemplateRef, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Subject, merge } from 'rxjs'; import { distinctUntilChanged, map, mergeMap, startWith, switchMap, takeUntil } from 'rxjs/operators'; @@ -159,15 +159,15 @@ export class NzInputNumberGroupComponent implements AfterContentInit, OnChanges, status: NzValidateStatus = ''; hasFeedback: boolean = false; private destroy$ = new Subject(); + private nzFormStatusService = inject(NzFormStatusService, { optional: true }); + private nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); constructor( private focusMonitor: FocusMonitor, private elementRef: ElementRef, private renderer: Renderer2, private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality, - @Optional() private nzFormStatusService?: NzFormStatusService, - @Optional() private nzFormNoStatusService?: NzFormNoStatusService + private directionality: Directionality ) {} updateChildrenInputSize(): void { diff --git a/components/input-number/input-number.component.ts b/components/input-number/input-number.component.ts index 6cf67c06e77..3bcf56cb5e5 100644 --- a/components/input-number/input-number.component.ts +++ b/components/input-number/input-number.component.ts @@ -18,7 +18,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Output, Renderer2, SimpleChanges, @@ -26,6 +25,7 @@ import { ViewEncapsulation, booleanAttribute, forwardRef, + inject, numberAttribute } from '@angular/core'; import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; @@ -398,16 +398,17 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn this.inputElement.nativeElement.blur(); } + nzFormStatusService = inject(NzFormStatusService, { optional: true }); + nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); + constructor( private ngZone: NgZone, private elementRef: ElementRef, private cdr: ChangeDetectorRef, private focusMonitor: FocusMonitor, private renderer: Renderer2, - @Optional() private directionality: Directionality, - private destroy$: NzDestroyService, - @Optional() public nzFormStatusService?: NzFormStatusService, - @Optional() public nzFormNoStatusService?: NzFormNoStatusService + private directionality: Directionality, + private destroy$: NzDestroyService ) {} ngOnInit(): void { diff --git a/components/input/input-group.component.ts b/components/input/input-group.component.ts index 764c8e5b968..7dedbe79586 100644 --- a/components/input/input-group.component.ts +++ b/components/input/input-group.component.ts @@ -18,13 +18,13 @@ import { OnChanges, OnDestroy, OnInit, - Optional, QueryList, Renderer2, SimpleChanges, TemplateRef, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Subject, merge } from 'rxjs'; import { distinctUntilChanged, map, mergeMap, startWith, switchMap, takeUntil } from 'rxjs/operators'; @@ -164,15 +164,15 @@ export class NzInputGroupComponent implements AfterContentInit, OnChanges, OnIni status: NzValidateStatus = ''; hasFeedback: boolean = false; private destroy$ = new Subject(); + private nzFormStatusService = inject(NzFormStatusService, { optional: true }); + private nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); constructor( private focusMonitor: FocusMonitor, private elementRef: ElementRef, private renderer: Renderer2, private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality, - @Optional() private nzFormStatusService?: NzFormStatusService, - @Optional() private nzFormNoStatusService?: NzFormNoStatusService + private directionality: Directionality ) {} updateChildrenInputSize(): void { diff --git a/components/input/input.directive.ts b/components/input/input.directive.ts index 39588be4f21..44c4868fda1 100644 --- a/components/input/input.directive.ts +++ b/components/input/input.directive.ts @@ -12,12 +12,11 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Renderer2, - Self, SimpleChanges, ViewContainerRef, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { NgControl } from '@angular/forms'; import { Subject } from 'rxjs'; @@ -69,14 +68,15 @@ export class NzInputDirective implements OnChanges, OnInit, OnDestroy { components: Array> = []; private destroy$ = new Subject(); + ngControl = inject(NgControl, { self: true, optional: true }); + private nzFormStatusService = inject(NzFormStatusService, { optional: true }); + private nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); + constructor( - @Optional() @Self() public ngControl: NgControl, private renderer: Renderer2, private elementRef: ElementRef, protected hostView: ViewContainerRef, - @Optional() private directionality: Directionality, - @Optional() private nzFormStatusService?: NzFormStatusService, - @Optional() public nzFormNoStatusService?: NzFormNoStatusService + private directionality: Directionality ) {} ngOnInit(): void { @@ -94,11 +94,11 @@ export class NzInputDirective implements OnChanges, OnInit, OnDestroy { if (this.ngControl) { this.ngControl.statusChanges ?.pipe( - filter(() => this.ngControl.disabled !== null), + filter(() => this.ngControl!.disabled !== null), takeUntil(this.destroy$) ) .subscribe(() => { - this.disabled$.next(this.ngControl.disabled!); + this.disabled$.next(this.ngControl!.disabled!); }); } diff --git a/components/input/textarea-count.component.ts b/components/input/textarea-count.component.ts index 68cba15a868..452d5f9834d 100644 --- a/components/input/textarea-count.component.ts +++ b/components/input/textarea-count.component.ts @@ -55,7 +55,7 @@ export class NzTextareaCountComponent implements AfterContentInit, OnDestroy { merge(valueChanges, this.configChange$) .pipe( takeUntil(this.destroy$), - map(() => this.nzInputDirective.ngControl.value), + map(() => this.nzInputDirective.ngControl!.value), startWith(this.nzInputDirective.ngControl.value as string) ) .subscribe(value => { diff --git a/components/layout/layout.component.ts b/components/layout/layout.component.ts index c035390d33f..99affd1cca4 100644 --- a/components/layout/layout.component.ts +++ b/components/layout/layout.component.ts @@ -10,7 +10,6 @@ import { ContentChildren, OnDestroy, OnInit, - Optional, QueryList, ViewEncapsulation } from '@angular/core'; @@ -39,7 +38,7 @@ export class NzLayoutComponent implements OnDestroy, OnInit { dir: Direction = 'ltr'; private destroy$ = new Subject(); - constructor(@Optional() private directionality: Directionality) {} + constructor(private directionality: Directionality) {} ngOnInit(): void { this.dir = this.directionality.value; this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => { diff --git a/components/list/list.component.ts b/components/list/list.component.ts index 19c6fe24781..676feb46e70 100644 --- a/components/list/list.component.ts +++ b/components/list/list.component.ts @@ -14,7 +14,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, SimpleChanges, TemplateRef, ViewEncapsulation, @@ -167,7 +166,7 @@ export class NzListComponent implements AfterContentInit, OnChanges, OnDestroy, return this.itemLayoutNotifySource.asObservable(); } - constructor(@Optional() private directionality: Directionality) {} + constructor(private directionality: Directionality) {} ngOnInit(): void { this.dir = this.directionality.value; this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => { diff --git a/components/mention/mention.component.ts b/components/mention/mention.component.ts index 0974da8ed0c..c1e91bf295d 100644 --- a/components/mention/mention.component.ts +++ b/components/mention/mention.component.ts @@ -23,13 +23,11 @@ import { ContentChild, ElementRef, EventEmitter, - Inject, Input, NgZone, OnChanges, OnDestroy, OnInit, - Optional, Output, QueryList, Renderer2, @@ -38,7 +36,8 @@ import { ViewChild, ViewChildren, ViewContainerRef, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Observable, Subscription, fromEvent, merge, of as observableOf } from 'rxjs'; import { distinctUntilChanged, map, startWith, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators'; @@ -165,6 +164,7 @@ export class NzMentionComponent implements OnDestroy, OnInit, AfterViewInit, OnC private portal?: TemplatePortal; private positionStrategy!: FlexibleConnectedPositionStrategy; private overlayOutsideClickSubscription!: Subscription; + private document: Document = inject(DOCUMENT); private get triggerNativeElement(): HTMLTextAreaElement | HTMLInputElement { return this.trigger.el.nativeElement; @@ -178,19 +178,19 @@ export class NzMentionComponent implements OnDestroy, OnInit, AfterViewInit, OnC return null; } + private nzFormStatusService = inject(NzFormStatusService, { optional: true }); + private nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); + constructor( private ngZone: NgZone, - @Optional() @Inject(DOCUMENT) private ngDocument: NzSafeAny, - @Optional() private directionality: Directionality, + private directionality: Directionality, private cdr: ChangeDetectorRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef, private elementRef: ElementRef, private renderer: Renderer2, private nzMentionService: NzMentionService, - private destroy$: NzDestroyService, - @Optional() private nzFormStatusService?: NzFormStatusService, - @Optional() private nzFormNoStatusService?: NzFormNoStatusService + private destroy$: NzDestroyService ) {} ngOnInit(): void { @@ -462,7 +462,7 @@ export class NzMentionComponent implements OnDestroy, OnInit, AfterViewInit, OnC subscription.add( this.ngZone.runOutsideAngular(() => - fromEvent(this.ngDocument, 'touchend').subscribe( + fromEvent(this.document, 'touchend').subscribe( event => canCloseDropdown(event) && this.ngZone.run(() => this.closeDropdown()) ) ) diff --git a/components/menu/menu-group.component.ts b/components/menu/menu-group.component.ts index 958e775c21c..bbe04c3e9d5 100644 --- a/components/menu/menu-group.component.ts +++ b/components/menu/menu-group.component.ts @@ -8,7 +8,6 @@ import { ChangeDetectionStrategy, Component, ElementRef, - Inject, inject, Input, Renderer2, @@ -57,11 +56,11 @@ export function MenuGroupFactory(): boolean { export class NzMenuGroupComponent implements AfterViewInit { @Input() nzTitle?: string | TemplateRef; @ViewChild('titleElement') titleElement?: ElementRef; + isMenuInsideDropDown = inject(NzIsMenuInsideDropDownToken); constructor( public elementRef: ElementRef, - private renderer: Renderer2, - @Inject(NzIsMenuInsideDropDownToken) public isMenuInsideDropDown: boolean + private renderer: Renderer2 ) { const className = this.isMenuInsideDropDown ? 'ant-dropdown-menu-item-group' : 'ant-menu-item-group'; this.renderer.addClass(elementRef.nativeElement, className); diff --git a/components/menu/menu-item.component.ts b/components/menu/menu-item.component.ts index 2d6d1df6b2e..82b5bdf5303 100644 --- a/components/menu/menu-item.component.ts +++ b/components/menu/menu-item.component.ts @@ -10,16 +10,15 @@ import { ChangeDetectorRef, Component, ContentChildren, - Inject, Input, OnChanges, OnDestroy, OnInit, - Optional, QueryList, SimpleChanges, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { NavigationEnd, Router, RouterLink } from '@angular/router'; import { Subject, combineLatest } from 'rxjs'; @@ -59,6 +58,11 @@ import { NzSubmenuService } from './submenu.service'; }) export class NzMenuItemComponent implements OnInit, OnChanges, OnDestroy, AfterContentInit { private destroy$ = new Subject(); + private nzSubmenuService = inject(NzSubmenuService, { optional: true }); + private directionality = inject(Directionality); + private routerLink = inject(RouterLink, { optional: true }); + private router = inject(Router, { optional: true }); + isMenuInsideDropDown = inject(NzIsMenuInsideDropDownToken); level = this.nzSubmenuService ? this.nzSubmenuService.level + 1 : 1; selected$ = new Subject(); inlinePaddingLeft: number | null = null; @@ -124,14 +128,9 @@ export class NzMenuItemComponent implements OnInit, OnChanges, OnDestroy, AfterC constructor( private nzMenuService: MenuService, - private cdr: ChangeDetectorRef, - @Optional() private nzSubmenuService: NzSubmenuService, - @Inject(NzIsMenuInsideDropDownToken) public isMenuInsideDropDown: boolean, - @Optional() private directionality: Directionality, - @Optional() private routerLink?: RouterLink, - @Optional() private router?: Router + private cdr: ChangeDetectorRef ) { - if (router) { + if (this.router) { this.router!.events.pipe( takeUntil(this.destroy$), filter(e => e instanceof NavigationEnd) diff --git a/components/menu/menu.directive.ts b/components/menu/menu.directive.ts index 5d2eadade85..56b24098629 100644 --- a/components/menu/menu.directive.ts +++ b/components/menu/menu.directive.ts @@ -10,12 +10,10 @@ import { ContentChildren, Directive, EventEmitter, - Inject, Input, OnChanges, OnDestroy, OnInit, - Optional, Output, QueryList, SimpleChanges, @@ -85,6 +83,7 @@ export function MenuDropDownTokenFactory(): boolean { export class NzMenuDirective implements AfterContentInit, OnInit, OnChanges, OnDestroy { @ContentChildren(NzMenuItemComponent, { descendants: true }) listOfNzMenuItemDirective!: QueryList; + isMenuInsideDropDown = inject(NzIsMenuInsideDropDownToken); @ContentChildren(NzSubMenuComponent, { descendants: true }) listOfNzSubMenuComponent!: QueryList; @Input() nzInlineIndent = 24; @Input() nzTheme: NzMenuThemeType = 'light'; @@ -98,6 +97,7 @@ export class NzMenuDirective implements AfterContentInit, OnInit, OnChanges, OnD private mode$ = new BehaviorSubject(this.nzMode); private destroy$ = new Subject(); private listOfOpenedNzSubMenuComponent: NzSubMenuComponent[] = []; + private directionality = inject(Directionality); setInlineCollapsed(inlineCollapsed: boolean): void { this.nzInlineCollapsed = inlineCollapsed; @@ -118,9 +118,7 @@ export class NzMenuDirective implements AfterContentInit, OnInit, OnChanges, OnD constructor( private nzMenuService: MenuService, - @Inject(NzIsMenuInsideDropDownToken) public isMenuInsideDropDown: boolean, - private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality + private cdr: ChangeDetectorRef ) {} ngOnInit(): void { diff --git a/components/menu/submenu-inline-child.component.ts b/components/menu/submenu-inline-child.component.ts index 0eed87ba87a..069eb83d185 100644 --- a/components/menu/submenu-inline-child.component.ts +++ b/components/menu/submenu-inline-child.component.ts @@ -13,7 +13,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Renderer2, SimpleChanges, TemplateRef, @@ -55,7 +54,7 @@ export class NzSubmenuInlineChildComponent implements OnDestroy, OnInit, OnChang constructor( private elementRef: ElementRef, private renderer: Renderer2, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} calcMotionState(): void { diff --git a/components/menu/submenu-non-inline-child.component.ts b/components/menu/submenu-non-inline-child.component.ts index b429194d058..2fe0c51fc36 100644 --- a/components/menu/submenu-non-inline-child.component.ts +++ b/components/menu/submenu-non-inline-child.component.ts @@ -13,7 +13,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Output, SimpleChanges, TemplateRef, @@ -74,7 +73,7 @@ export class NzSubmenuNoneInlineChildComponent implements OnDestroy, OnInit, OnC @Input() nzOpen = false; @Output() readonly subMenuMouseState = new EventEmitter(); - constructor(@Optional() private directionality: Directionality) {} + constructor(private directionality: Directionality) {} setMouseState(state: boolean): void { if (!this.nzDisabled) { diff --git a/components/menu/submenu-title.component.ts b/components/menu/submenu-title.component.ts index 6f79ef5b948..645ce755ffd 100644 --- a/components/menu/submenu-title.component.ts +++ b/components/menu/submenu-title.component.ts @@ -12,7 +12,6 @@ import { Input, OnDestroy, OnInit, - Optional, Output, TemplateRef, ViewEncapsulation @@ -80,7 +79,7 @@ export class NzSubMenuTitleComponent implements OnDestroy, OnInit { constructor( private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { this.dir = this.directionality.value; diff --git a/components/menu/submenu.component.ts b/components/menu/submenu.component.ts index 1f31ebc94bb..96dc89304ad 100644 --- a/components/menu/submenu.component.ts +++ b/components/menu/submenu.component.ts @@ -16,13 +16,11 @@ import { ElementRef, EventEmitter, forwardRef, - Host, - Inject, + inject, Input, OnChanges, OnDestroy, OnInit, - Optional, Output, QueryList, SimpleChanges, @@ -181,6 +179,9 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterContentInit, isSelected = false; isActive = false; dir: Direction = 'ltr'; + isMenuInsideDropDown = inject(NzIsMenuInsideDropDownToken); + noAnimation = inject(NzNoAnimationDirective, { optional: true, host: true }); + private directionality = inject(Directionality); /** set the submenu host open status directly **/ setOpenStateWithoutDebounce(open: boolean): void { @@ -223,10 +224,7 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterContentInit, public nzMenuService: MenuService, private cdr: ChangeDetectorRef, public nzSubmenuService: NzSubmenuService, - private platform: Platform, - @Inject(NzIsMenuInsideDropDownToken) public isMenuInsideDropDown: boolean, - @Optional() private directionality: Directionality, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective + private platform: Platform ) {} ngOnInit(): void { diff --git a/components/menu/submenu.service.ts b/components/menu/submenu.service.ts index a02290f8435..a42d20fcaa6 100644 --- a/components/menu/submenu.service.ts +++ b/components/menu/submenu.service.ts @@ -3,8 +3,8 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Inject, Injectable, OnDestroy, Optional, SkipSelf } from '@angular/core'; -import { BehaviorSubject, combineLatest, merge, Observable, Subject } from 'rxjs'; +import { Injectable, OnDestroy, inject } from '@angular/core'; +import { BehaviorSubject, Observable, Subject, combineLatest, merge } from 'rxjs'; import { auditTime, distinctUntilChanged, filter, map, mapTo, mergeMap, takeUntil } from 'rxjs/operators'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; @@ -28,12 +28,14 @@ export class NzSubmenuService implements OnDestroy { }) ); level = 1; + isMenuInsideDropDown = inject(NzIsMenuInsideDropDownToken); isCurrentSubMenuOpen$ = new BehaviorSubject(false); private isChildSubMenuOpen$ = new BehaviorSubject(false); /** submenu title & overlay mouse enter status **/ private isMouseEnterTitleOrOverlay$ = new Subject(); private childMenuItemClick$ = new Subject(); private destroy$ = new Subject(); + private nzHostSubmenuService = inject(NzSubmenuService, { optional: true, skipSelf: true }); /** * menu item inside submenu clicked * @@ -49,11 +51,7 @@ export class NzSubmenuService implements OnDestroy { this.isMouseEnterTitleOrOverlay$.next(value); } - constructor( - @SkipSelf() @Optional() private nzHostSubmenuService: NzSubmenuService, - public nzMenuService: MenuService, - @Inject(NzIsMenuInsideDropDownToken) public isMenuInsideDropDown: boolean - ) { + constructor(public nzMenuService: MenuService) { if (this.nzHostSubmenuService) { this.level = this.nzHostSubmenuService.level + 1; } diff --git a/components/modal/modal-confirm-container.component.ts b/components/modal/modal-confirm-container.component.ts index eb1b548e3eb..0165b462d22 100644 --- a/components/modal/modal-confirm-container.component.ts +++ b/components/modal/modal-confirm-container.component.ts @@ -3,31 +3,22 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { FocusTrapFactory } from '@angular/cdk/a11y'; -import { OverlayRef } from '@angular/cdk/overlay'; import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal'; -import { DOCUMENT, NgClass, NgStyle } from '@angular/common'; +import { NgClass, NgStyle } from '@angular/common'; import { ChangeDetectionStrategy, - ChangeDetectorRef, Component, ElementRef, EventEmitter, - Inject, - NgZone, OnInit, - Optional, Output, - Renderer2, - ViewChild + ViewChild, + inject } from '@angular/core'; -import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations'; import { takeUntil } from 'rxjs/operators'; import { NzButtonModule } from 'ng-zorro-antd/button'; -import { NzConfigService } from 'ng-zorro-antd/core/config'; import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; -import { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NzI18nService, NzModalI18nInterface } from 'ng-zorro-antd/i18n'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzPipesModule } from 'ng-zorro-antd/pipes'; @@ -35,7 +26,6 @@ import { NzPipesModule } from 'ng-zorro-antd/pipes'; import { nzModalAnimations } from './modal-animations'; import { NzModalCloseComponent } from './modal-close.component'; import { BaseModalContainerComponent } from './modal-container.directive'; -import { ModalOptions } from './modal-types'; @Component({ selector: 'nz-modal-confirm-container', @@ -135,21 +125,10 @@ export class NzModalConfirmContainerComponent extends BaseModalContainerComponen @Output() override readonly cancelTriggered = new EventEmitter(); @Output() override readonly okTriggered = new EventEmitter(); locale!: NzModalI18nInterface; + private i18n = inject(NzI18nService); - constructor( - ngZone: NgZone, - private i18n: NzI18nService, - host: ElementRef, - focusTrapFactory: FocusTrapFactory, - cdr: ChangeDetectorRef, - render: Renderer2, - overlayRef: OverlayRef, - nzConfigService: NzConfigService, - public override config: ModalOptions, - @Optional() @Inject(DOCUMENT) document: NzSafeAny, - @Optional() @Inject(ANIMATION_MODULE_TYPE) animationType: string - ) { - super(ngZone, host, focusTrapFactory, cdr, render, overlayRef, nzConfigService, config, document, animationType); + constructor() { + super(); this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => { this.locale = this.i18n.getLocaleData('Modal'); diff --git a/components/modal/modal-container.component.ts b/components/modal/modal-container.component.ts index 4f2b5ff2f89..8cb7c82bc3f 100644 --- a/components/modal/modal-container.component.ts +++ b/components/modal/modal-container.component.ts @@ -3,27 +3,11 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { FocusTrapFactory } from '@angular/cdk/a11y'; import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop'; -import { OverlayRef } from '@angular/cdk/overlay'; import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal'; -import { DOCUMENT, NgClass, NgStyle } from '@angular/common'; -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - Inject, - NgZone, - OnInit, - Optional, - Renderer2, - ViewChild -} from '@angular/core'; -import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations'; +import { NgClass, NgStyle } from '@angular/common'; +import { ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; -import { NzConfigService } from 'ng-zorro-antd/core/config'; -import { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NzPipesModule } from 'ng-zorro-antd/pipes'; import { nzModalAnimations } from './modal-animations'; @@ -31,7 +15,6 @@ import { NzModalCloseComponent } from './modal-close.component'; import { BaseModalContainerComponent } from './modal-container.directive'; import { NzModalFooterComponent } from './modal-footer.component'; import { NzModalTitleComponent } from './modal-title.component'; -import { ModalOptions } from './modal-types'; @Component({ selector: 'nz-modal-container', @@ -105,20 +88,6 @@ import { ModalOptions } from './modal-types'; export class NzModalContainerComponent extends BaseModalContainerComponent implements OnInit { @ViewChild(CdkPortalOutlet, { static: true }) override portalOutlet!: CdkPortalOutlet; @ViewChild('modalElement', { static: true }) override modalElementRef!: ElementRef; - constructor( - ngZone: NgZone, - host: ElementRef, - focusTrapFactory: FocusTrapFactory, - cdr: ChangeDetectorRef, - render: Renderer2, - overlayRef: OverlayRef, - nzConfigService: NzConfigService, - public override config: ModalOptions, - @Optional() @Inject(DOCUMENT) document: NzSafeAny, - @Optional() @Inject(ANIMATION_MODULE_TYPE) animationType: string - ) { - super(ngZone, host, focusTrapFactory, cdr, render, overlayRef, nzConfigService, config, document, animationType); - } ngOnInit(): void { this.setupMouseListeners(this.modalElementRef); diff --git a/components/modal/modal-container.directive.ts b/components/modal/modal-container.directive.ts index fef4fdefaa1..946e46f345f 100644 --- a/components/modal/modal-container.directive.ts +++ b/components/modal/modal-container.directive.ts @@ -8,7 +8,9 @@ import { FocusTrap, FocusTrapFactory } from '@angular/cdk/a11y'; import { Direction } from '@angular/cdk/bidi'; import { OverlayRef } from '@angular/cdk/overlay'; import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal'; +import { DOCUMENT } from '@angular/common'; import { + ANIMATION_MODULE_TYPE, ChangeDetectorRef, ComponentRef, Directive, @@ -17,7 +19,8 @@ import { EventEmitter, NgZone, OnDestroy, - Renderer2 + Renderer2, + inject } from '@angular/core'; import { Subject, fromEvent } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -47,7 +50,7 @@ export class BaseModalContainerComponent extends BasePortalOutlet implements OnD okTriggered = new EventEmitter(); state: 'void' | 'enter' | 'exit' = 'enter'; - document: Document; + document: Document = inject(DOCUMENT); modalRef!: NzModalRef; isStringContent: boolean = false; dir: Direction = 'ltr'; @@ -55,7 +58,16 @@ export class BaseModalContainerComponent extends BasePortalOutlet implements OnD private focusTrap!: FocusTrap; private mouseDown = false; private oldMaskStyle: { [key: string]: string } | null = null; + cdr: ChangeDetectorRef = inject(ChangeDetectorRef); + config: ModalOptions = inject(ModalOptions); protected destroy$ = new Subject(); + protected ngZone: NgZone = inject(NgZone); + protected host: ElementRef = inject(ElementRef); + protected focusTrapFactory: FocusTrapFactory = inject(FocusTrapFactory); + protected render: Renderer2 = inject(Renderer2); + protected overlayRef: OverlayRef = inject(OverlayRef); + protected nzConfigService: NzConfigService = inject(NzConfigService); + protected animationType = inject(ANIMATION_MODULE_TYPE, { optional: true }); get showMask(): boolean { const defaultConfig: NzSafeAny = this.nzConfigService.getConfigForComponent(NZ_CONFIG_MODULE_NAME) || {}; @@ -69,22 +81,10 @@ export class BaseModalContainerComponent extends BasePortalOutlet implements OnD return !!getValueWithConfig(this.config.nzMaskClosable, defaultConfig.nzMaskClosable, true); } - constructor( - protected ngZone: NgZone, - protected host: ElementRef, - protected focusTrapFactory: FocusTrapFactory, - public cdr: ChangeDetectorRef, - protected render: Renderer2, - protected overlayRef: OverlayRef, - protected nzConfigService: NzConfigService, - public config: ModalOptions, - document?: NzSafeAny, - protected animationType?: string - ) { + constructor() { super(); - this.document = document; - this.dir = overlayRef.getDirection(); - this.isStringContent = typeof config.nzContent === 'string'; + this.dir = this.overlayRef.getDirection(); + this.isStringContent = typeof this.config.nzContent === 'string'; this.nzConfigService .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME) .pipe(takeUntil(this.destroy$)) diff --git a/components/modal/modal-footer.directive.ts b/components/modal/modal-footer.directive.ts index 92b8b3641c6..b72ee6e4d5b 100644 --- a/components/modal/modal-footer.directive.ts +++ b/components/modal/modal-footer.directive.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directive, Optional, TemplateRef } from '@angular/core'; +import { Directive, TemplateRef, inject } from '@angular/core'; import { NzModalRef } from './modal-ref'; @@ -13,10 +13,9 @@ import { NzModalRef } from './modal-ref'; standalone: true }) export class NzModalFooterDirective { - constructor( - @Optional() private nzModalRef: NzModalRef, - public templateRef: TemplateRef<{}> - ) { + private nzModalRef = inject(NzModalRef, { optional: true }); + + constructor(public templateRef: TemplateRef<{}>) { if (this.nzModalRef) { this.nzModalRef.updateConfig({ nzFooter: this.templateRef diff --git a/components/modal/modal-title.directive.ts b/components/modal/modal-title.directive.ts index 80717f64604..8fc644b4e0d 100644 --- a/components/modal/modal-title.directive.ts +++ b/components/modal/modal-title.directive.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directive, Optional, TemplateRef } from '@angular/core'; +import { Directive, TemplateRef, inject } from '@angular/core'; import { NzModalRef } from './modal-ref'; @@ -13,10 +13,9 @@ import { NzModalRef } from './modal-ref'; standalone: true }) export class NzModalTitleDirective { - constructor( - @Optional() private nzModalRef: NzModalRef, - public templateRef: TemplateRef<{}> - ) { + private nzModalRef = inject(NzModalRef, { optional: true }); + + constructor(public templateRef: TemplateRef<{}>) { if (this.nzModalRef) { this.nzModalRef.updateConfig({ nzTitle: this.templateRef diff --git a/components/modal/modal.service.ts b/components/modal/modal.service.ts index 9640001e6ae..45631bfc426 100644 --- a/components/modal/modal.service.ts +++ b/components/modal/modal.service.ts @@ -6,8 +6,8 @@ import { Directionality } from '@angular/cdk/bidi'; import { ComponentType, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal'; -import { Injectable, Injector, OnDestroy, Optional, SkipSelf, TemplateRef } from '@angular/core'; -import { defer, Observable, Subject } from 'rxjs'; +import { Injectable, Injector, OnDestroy, TemplateRef, inject } from '@angular/core'; +import { Observable, Subject, defer } from 'rxjs'; import { startWith } from 'rxjs/operators'; import { NzConfigService } from 'ng-zorro-antd/core/config'; @@ -44,12 +44,13 @@ export class NzModalService implements OnDestroy { this.openModals.length ? this._afterAllClosed : this._afterAllClosed.pipe(startWith(undefined)) ) as Observable; + private parentModal = inject(NzModalService, { skipSelf: true, optional: true }); + constructor( private overlay: Overlay, private injector: Injector, private nzConfigService: NzConfigService, - @Optional() @SkipSelf() private parentModal: NzModalService, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} create(config: ModalOptions): NzModalRef { diff --git a/components/modal/modal.spec.ts b/components/modal/modal.spec.ts index 7ef4744f4f4..4d36810ac8c 100644 --- a/components/modal/modal.spec.ts +++ b/components/modal/modal.spec.ts @@ -7,15 +7,23 @@ import { ChangeDetectionStrategy, Component, Directive, - Inject, Injector, Input, NgModule, TemplateRef, ViewChild, - ViewContainerRef + ViewContainerRef, + inject } from '@angular/core'; -import { ComponentFixture, fakeAsync, flush, flushMicrotasks, inject, TestBed, tick } from '@angular/core/testing'; +import { + ComponentFixture, + TestBed, + fakeAsync, + flush, + flushMicrotasks, + inject as testingInject, + tick +} from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -47,11 +55,13 @@ describe('Animation', () => { TestBed.compileComponents(); })); - beforeEach(inject([NzModalService, OverlayContainer], (m: NzModalService, oc: OverlayContainer) => { - modalService = m; - overlayContainer = oc; - overlayContainerElement = oc.getContainerElement(); - })); + beforeEach( + testingInject([NzModalService, OverlayContainer], (m: NzModalService, oc: OverlayContainer) => { + modalService = m; + overlayContainer = oc; + overlayContainerElement = oc.getContainerElement(); + }) + ); afterEach(() => { overlayContainer.ngOnDestroy(); @@ -101,16 +111,18 @@ describe('NzModal', () => { TestBed.compileComponents(); })); - beforeEach(inject( - [NzModalService, Location, OverlayContainer, NzConfigService], - (m: NzModalService, l: Location, oc: OverlayContainer, cs: NzConfigService) => { - modalService = m; - configService = cs; - mockLocation = l as SpyLocation; - overlayContainer = oc; - overlayContainerElement = oc.getContainerElement(); - } - )); + beforeEach( + testingInject( + [NzModalService, Location, OverlayContainer, NzConfigService], + (m: NzModalService, l: Location, oc: OverlayContainer, cs: NzConfigService) => { + modalService = m; + configService = cs; + mockLocation = l as SpyLocation; + overlayContainer = oc; + overlayContainerElement = oc.getContainerElement(); + } + ) + ); afterEach(() => { overlayContainer.ngOnDestroy(); @@ -1785,18 +1797,13 @@ class TestWithServiceComponent { ` }) class TestWithModalContentComponent { - @Input() value?: string; - - nzModalData: string; + @Input() value: string = inject(NZ_MODAL_DATA); + nzModalData: string = inject(NZ_MODAL_DATA); constructor( public modalRef: NzModalRef, - public modalInjector: Injector, - @Inject(NZ_MODAL_DATA) nzData: string - ) { - this.value = nzData; - this.nzModalData = nzData; - } + public modalInjector: Injector + ) {} destroyModal(): void { this.modalRef.destroy(); diff --git a/components/page-header/page-header.component.ts b/components/page-header/page-header.component.ts index 791fef69d9e..3f0a0b5edae 100644 --- a/components/page-header/page-header.component.ts +++ b/components/page-header/page-header.component.ts @@ -16,10 +16,10 @@ import { Input, OnDestroy, OnInit, - Optional, Output, TemplateRef, - ViewEncapsulation + ViewEncapsulation, + inject } from '@angular/core'; import { Subject } from 'rxjs'; import { map, takeUntil } from 'rxjs/operators'; @@ -112,13 +112,14 @@ export class NzPageHeaderComponent implements AfterViewInit, OnDestroy, OnInit { destroy$ = new Subject(); dir: Direction = 'ltr'; + private location = inject(Location, { optional: true }); + constructor( - @Optional() private location: Location, public nzConfigService: NzConfigService, private elementRef: ElementRef, private nzResizeObserver: NzResizeObserver, private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/pagination/pagination-default.component.ts b/components/pagination/pagination-default.component.ts index a2cd3421356..1230a150b6a 100644 --- a/components/pagination/pagination-default.component.ts +++ b/components/pagination/pagination-default.component.ts @@ -15,7 +15,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Output, Renderer2, SimpleChanges, @@ -112,7 +111,7 @@ export class NzPaginationDefaultComponent implements OnChanges, OnDestroy, OnIni private cdr: ChangeDetectorRef, private renderer: Renderer2, private elementRef: ElementRef, - @Optional() private directionality: Directionality + private directionality: Directionality ) { renderer.removeChild(renderer.parentNode(elementRef.nativeElement), elementRef.nativeElement); } diff --git a/components/pagination/pagination-simple.component.ts b/components/pagination/pagination-simple.component.ts index da922459f09..c70eb4d0659 100644 --- a/components/pagination/pagination-simple.component.ts +++ b/components/pagination/pagination-simple.component.ts @@ -14,7 +14,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Output, Renderer2, SimpleChanges, @@ -91,7 +90,7 @@ export class NzPaginationSimpleComponent implements OnChanges, OnDestroy, OnInit private cdr: ChangeDetectorRef, private renderer: Renderer2, private elementRef: ElementRef, - @Optional() private directionality: Directionality + private directionality: Directionality ) { renderer.removeChild(renderer.parentNode(elementRef.nativeElement), elementRef.nativeElement); } diff --git a/components/pagination/pagination.component.ts b/components/pagination/pagination.component.ts index 9682ff391af..95423638c93 100644 --- a/components/pagination/pagination.component.ts +++ b/components/pagination/pagination.component.ts @@ -14,7 +14,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Output, SimpleChanges, TemplateRef, @@ -161,7 +160,7 @@ export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges { private cdr: ChangeDetectorRef, private breakpointService: NzBreakpointService, protected nzConfigService: NzConfigService, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/popconfirm/popconfirm.ts b/components/popconfirm/popconfirm.ts index e104de956d3..e2a9cda7218 100644 --- a/components/popconfirm/popconfirm.ts +++ b/components/popconfirm/popconfirm.ts @@ -4,27 +4,23 @@ */ import { A11yModule } from '@angular/cdk/a11y'; -import { Directionality } from '@angular/cdk/bidi'; import { OverlayModule } from '@angular/cdk/overlay'; import { DOCUMENT, NgClass, NgStyle } from '@angular/common'; import { ChangeDetectionStrategy, - ChangeDetectorRef, Component, Directive, ElementRef, EventEmitter, - Host, - Inject, Input, OnDestroy, - Optional, Output, QueryList, TemplateRef, ViewChildren, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Observable, Subject } from 'rxjs'; import { finalize, first, takeUntil } from 'rxjs/operators'; @@ -35,7 +31,7 @@ import { NzConfigKey, WithConfig } from 'ng-zorro-antd/core/config'; import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation'; import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import { NzOverlayModule } from 'ng-zorro-antd/core/overlay'; -import { NgStyleInterface, NzSafeAny, NzTSType } from 'ng-zorro-antd/core/types'; +import { NgStyleInterface, NzTSType } from 'ng-zorro-antd/core/types'; import { wrapIntoObservable } from 'ng-zorro-antd/core/util'; import { NzI18nModule } from 'ng-zorro-antd/i18n'; import { NzIconModule } from 'ng-zorro-antd/icon'; @@ -246,21 +242,14 @@ export class NzPopconfirmComponent extends NzToolTipComponent implements OnDestr protected override _trigger: NzTooltipTrigger = 'click'; private elementFocusedBeforeModalWasOpened: HTMLElement | null = null; - private document: Document; + private document: Document = inject(DOCUMENT); override _prefix = 'ant-popover'; confirmLoading = false; - constructor( - cdr: ChangeDetectorRef, - private elementRef: ElementRef, - @Optional() directionality: Directionality, - @Optional() @Inject(DOCUMENT) document: NzSafeAny, - @Host() @Optional() noAnimation?: NzNoAnimationDirective - ) { - super(cdr, directionality, noAnimation); - this.document = document; + constructor(private elementRef: ElementRef) { + super(); } override ngOnDestroy(): void { diff --git a/components/popover/popover.ts b/components/popover/popover.ts index b3243244bdb..0392fdf57fc 100644 --- a/components/popover/popover.ts +++ b/components/popover/popover.ts @@ -3,19 +3,15 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directionality } from '@angular/cdk/bidi'; import { OverlayModule } from '@angular/cdk/overlay'; import { NgClass, NgStyle } from '@angular/common'; import { ChangeDetectionStrategy, - ChangeDetectorRef, Component, Directive, ElementRef, EventEmitter, - Host, Input, - Optional, Output, ViewEncapsulation, booleanAttribute @@ -135,14 +131,6 @@ export class NzPopoverDirective extends NzTooltipBaseDirective { export class NzPopoverComponent extends NzToolTipComponent { override _prefix = 'ant-popover'; - constructor( - cdr: ChangeDetectorRef, - @Optional() directionality: Directionality, - @Host() @Optional() noAnimation?: NzNoAnimationDirective - ) { - super(cdr, directionality, noAnimation); - } - get hasBackdrop(): boolean { return this.nzTrigger === 'click' ? this.nzBackdrop : false; } diff --git a/components/progress/progress.component.ts b/components/progress/progress.component.ts index 481e0464c42..f1a02fe9905 100644 --- a/components/progress/progress.component.ts +++ b/components/progress/progress.component.ts @@ -13,7 +13,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, SimpleChanges, ViewEncapsulation, numberAttribute @@ -240,7 +239,7 @@ export class NzProgressComponent implements OnChanges, OnInit, OnDestroy { constructor( private cdr: ChangeDetectorRef, public nzConfigService: NzConfigService, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnChanges(changes: SimpleChanges): void { diff --git a/components/qr-code/qrcode.component.ts b/components/qr-code/qrcode.component.ts index 94b91f3a6a1..493d3afbbb4 100644 --- a/components/qr-code/qrcode.component.ts +++ b/components/qr-code/qrcode.component.ts @@ -12,7 +12,7 @@ import { Component, ElementRef, EventEmitter, - Inject, + inject, Input, numberAttribute, OnChanges, @@ -93,12 +93,12 @@ export class NzQRCodeComponent implements OnInit, AfterViewInit, OnChanges, OnDe // canvas is not supported by the SSR DOM isBrowser = true; private destroy$ = new Subject(); + private platformId = inject(PLATFORM_ID); constructor( private i18n: NzI18nService, private el: ElementRef, - private cdr: ChangeDetectorRef, - @Inject(PLATFORM_ID) private platformId: Object + private cdr: ChangeDetectorRef ) { this.isBrowser = isPlatformBrowser(this.platformId); this.cdr.markForCheck(); diff --git a/components/radio/radio-group.component.ts b/components/radio/radio-group.component.ts index ec0c039d4c5..9f30107ad94 100644 --- a/components/radio/radio-group.component.ts +++ b/components/radio/radio-group.component.ts @@ -12,7 +12,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, SimpleChanges, ViewEncapsulation, booleanAttribute, @@ -68,7 +67,7 @@ export class NzRadioGroupComponent implements OnInit, ControlValueAccessor, OnDe constructor( private cdr: ChangeDetectorRef, private nzRadioService: NzRadioService, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/radio/radio.component.ts b/components/radio/radio.component.ts index 87eae000398..14e66109026 100644 --- a/components/radio/radio.component.ts +++ b/components/radio/radio.component.ts @@ -11,16 +11,15 @@ import { ChangeDetectorRef, Component, ElementRef, - Inject, Input, NgZone, OnDestroy, OnInit, - Optional, ViewChild, ViewEncapsulation, booleanAttribute, - forwardRef + forwardRef, + inject } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Subject, fromEvent } from 'rxjs'; @@ -84,6 +83,9 @@ export class NzRadioComponent implements ControlValueAccessor, AfterViewInit, On private isNgModel = false; private destroy$ = new Subject(); private isNzDisableFirstChange: boolean = true; + private directionality = inject(Directionality); + private nzRadioService = inject(NzRadioService, { optional: true }); + nzFormStatusService = inject(NzFormStatusService, { optional: true }); isChecked = false; name: string | null = null; onChange: OnChangeType = () => {}; @@ -108,10 +110,7 @@ export class NzRadioComponent implements ControlValueAccessor, AfterViewInit, On private ngZone: NgZone, private elementRef: ElementRef, private cdr: ChangeDetectorRef, - private focusMonitor: FocusMonitor, - @Optional() private directionality: Directionality, - @Optional() @Inject(NzRadioService) private nzRadioService: NzRadioService | null, - @Optional() public nzFormStatusService?: NzFormStatusService + private focusMonitor: FocusMonitor ) {} setDisabledState(disabled: boolean): void { diff --git a/components/rate/rate.component.ts b/components/rate/rate.component.ts index 34555c444d1..1843335774b 100644 --- a/components/rate/rate.component.ts +++ b/components/rate/rate.component.ts @@ -16,7 +16,6 @@ import { NgZone, OnChanges, OnInit, - Optional, Output, Renderer2, SimpleChanges, @@ -134,7 +133,7 @@ export class NzRateComponent implements OnInit, ControlValueAccessor, OnChanges private ngZone: NgZone, private renderer: Renderer2, private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality, + private directionality: Directionality, private destroy$: NzDestroyService ) {} diff --git a/components/resizable/resizable.service.ts b/components/resizable/resizable.service.ts index b6d68715236..b48db10195d 100644 --- a/components/resizable/resizable.service.ts +++ b/components/resizable/resizable.service.ts @@ -4,17 +4,16 @@ */ import { DOCUMENT } from '@angular/common'; -import { Inject, Injectable, NgZone, OnDestroy } from '@angular/core'; +import { Injectable, NgZone, OnDestroy, inject } from '@angular/core'; import { Subject } from 'rxjs'; -import { NzSafeAny } from 'ng-zorro-antd/core/types'; import { isTouchEvent } from 'ng-zorro-antd/core/util'; import { NzResizeHandleMouseDownEvent } from './resize-handle.component'; @Injectable() export class NzResizableService implements OnDestroy { - private document: Document; + private document: Document = inject(DOCUMENT); private listeners = new Map void>(); /** @@ -32,12 +31,7 @@ export class NzResizableService implements OnDestroy { documentMouseMoveOutsideAngular$ = new Subject(); mouseEnteredOutsideAngular$ = new Subject(); - constructor( - private ngZone: NgZone, - @Inject(DOCUMENT) document: NzSafeAny - ) { - this.document = document; - } + constructor(private ngZone: NgZone) {} startResizing(event: MouseEvent | TouchEvent): void { const _isTouchEvent = isTouchEvent(event); diff --git a/components/result/result.component.ts b/components/result/result.component.ts index 4e792574aa3..bf023e28f88 100644 --- a/components/result/result.component.ts +++ b/components/result/result.component.ts @@ -12,7 +12,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, TemplateRef, ViewEncapsulation } from '@angular/core'; @@ -123,7 +122,7 @@ export class NzResultComponent implements OnChanges, OnDestroy, OnInit { constructor( private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/segmented/segmented.component.ts b/components/segmented/segmented.component.ts index 148d0bef821..6c1b638e1a6 100644 --- a/components/segmented/segmented.component.ts +++ b/components/segmented/segmented.component.ts @@ -15,7 +15,6 @@ import { forwardRef, Input, OnChanges, - Optional, Output, QueryList, SimpleChanges, @@ -134,7 +133,7 @@ export class NzSegmentedComponent implements OnChanges, ControlValueAccessor { constructor( public readonly nzConfigService: NzConfigService, private readonly cdr: ChangeDetectorRef, - @Optional() private readonly directionality: Directionality + private readonly directionality: Directionality ) { this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe(direction => { this.dir = direction; diff --git a/components/select/option.component.ts b/components/select/option.component.ts index 73830b6f3c5..66da6d8c409 100644 --- a/components/select/option.component.ts +++ b/components/select/option.component.ts @@ -9,11 +9,11 @@ import { Input, OnChanges, OnInit, - Optional, TemplateRef, ViewChild, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Subject } from 'rxjs'; import { startWith, takeUntil } from 'rxjs/operators'; @@ -38,7 +38,7 @@ import { NzOptionGroupComponent } from './option-group.component'; }) export class NzOptionComponent implements OnChanges, OnInit { changes = new Subject(); - groupLabel: string | number | TemplateRef | null = null; + groupLabel?: string | number | TemplateRef | null = null; @ViewChild(TemplateRef, { static: true }) template!: TemplateRef; @Input() nzTitle?: string | number | null; @Input() nzLabel: string | number | null = null; @@ -48,15 +48,14 @@ export class NzOptionComponent implements OnChanges, OnInit { @Input({ transform: booleanAttribute }) nzHide = false; @Input({ transform: booleanAttribute }) nzCustomContent = false; - constructor( - @Optional() private nzOptionGroupComponent: NzOptionGroupComponent, - private destroy$: NzDestroyService - ) {} + private nzOptionGroupComponent = inject(NzOptionGroupComponent, { optional: true }); + + constructor(private destroy$: NzDestroyService) {} ngOnInit(): void { if (this.nzOptionGroupComponent) { this.nzOptionGroupComponent.changes.pipe(startWith(true), takeUntil(this.destroy$)).subscribe(() => { - this.groupLabel = this.nzOptionGroupComponent.nzLabel; + this.groupLabel = this.nzOptionGroupComponent?.nzLabel; }); } } diff --git a/components/select/select-top-control.component.ts b/components/select/select-top-control.component.ts index 168a7db805e..e7968d29188 100644 --- a/components/select/select-top-control.component.ts +++ b/components/select/select-top-control.component.ts @@ -10,18 +10,17 @@ import { Component, ElementRef, EventEmitter, - Host, Input, NgZone, OnChanges, OnDestroy, OnInit, - Optional, Output, SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation, + inject, numberAttribute } from '@angular/core'; import { Subject, fromEvent } from 'rxjs'; @@ -207,10 +206,11 @@ export class NzSelectTopControlComponent implements OnChanges, OnInit, OnDestroy } } + noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); + constructor( private elementRef: ElementRef, - private ngZone: NgZone, - @Host() @Optional() public noAnimation: NzNoAnimationDirective | null + private ngZone: NgZone ) {} ngOnChanges(changes: SimpleChanges): void { diff --git a/components/select/select.component.ts b/components/select/select.component.ts index eaccc992a79..aa41fd46f39 100644 --- a/components/select/select.component.ts +++ b/components/select/select.component.ts @@ -12,7 +12,7 @@ import { ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay'; -import { _getEventTarget, Platform } from '@angular/cdk/platform'; +import { Platform, _getEventTarget } from '@angular/cdk/platform'; import { NgIf, NgStyle } from '@angular/common'; import { AfterContentInit, @@ -22,13 +22,11 @@ import { ContentChildren, ElementRef, EventEmitter, - Host, Input, NgZone, OnChanges, OnDestroy, OnInit, - Optional, Output, QueryList, Renderer2, @@ -37,7 +35,8 @@ import { ViewChild, ViewEncapsulation, booleanAttribute, - forwardRef + forwardRef, + inject } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { BehaviorSubject, combineLatest, fromEvent, merge, of as observableOf } from 'rxjs'; @@ -580,6 +579,10 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon }); } + noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); + private nzFormStatusService = inject(NzFormStatusService, { optional: true }); + private nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); + constructor( private ngZone: NgZone, private destroy$: NzDestroyService, @@ -589,10 +592,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon private renderer: Renderer2, private platform: Platform, private focusMonitor: FocusMonitor, - @Optional() private directionality: Directionality, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective, - @Optional() public nzFormStatusService?: NzFormStatusService, - @Optional() private nzFormNoStatusService?: NzFormNoStatusService + private directionality: Directionality ) {} writeValue(modelValue: NzSafeAny | NzSafeAny[]): void { diff --git a/components/slider/slider.component.ts b/components/slider/slider.component.ts index 477b2dd4691..57173ce9f93 100644 --- a/components/slider/slider.component.ts +++ b/components/slider/slider.component.ts @@ -17,7 +17,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Output, QueryList, SimpleChanges, @@ -174,7 +173,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange private sliderService: NzSliderService, private cdr: ChangeDetectorRef, private platform: Platform, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/spin/spin.component.ts b/components/spin/spin.component.ts index d8c9a0d592e..3b36ffa358e 100644 --- a/components/spin/spin.component.ts +++ b/components/spin/spin.component.ts @@ -12,7 +12,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, SimpleChanges, TemplateRef, ViewEncapsulation, @@ -82,7 +81,7 @@ export class NzSpinComponent implements OnChanges, OnDestroy, OnInit { constructor( public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/statistic/countdown.component.ts b/components/statistic/countdown.component.ts index d1dd88df247..ace1f9d7abf 100644 --- a/components/statistic/countdown.component.ts +++ b/components/statistic/countdown.component.ts @@ -3,11 +3,9 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directionality } from '@angular/cdk/bidi'; import { Platform } from '@angular/cdk/platform'; import { ChangeDetectionStrategy, - ChangeDetectorRef, Component, EventEmitter, Input, @@ -15,12 +13,11 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Output, SimpleChanges, ViewEncapsulation } from '@angular/core'; -import { interval, Subscription } from 'rxjs'; +import { Subscription, interval } from 'rxjs'; import { NzPipesModule } from 'ng-zorro-antd/core/pipe'; @@ -58,12 +55,10 @@ export class NzCountdownComponent extends NzStatisticComponent implements OnInit private updater_?: Subscription | null; constructor( - cdr: ChangeDetectorRef, private ngZone: NgZone, - private platform: Platform, - @Optional() directionality: Directionality + private platform: Platform ) { - super(cdr, directionality); + super(); } ngOnChanges(changes: SimpleChanges): void { diff --git a/components/statistic/statistic-number.component.ts b/components/statistic/statistic-number.component.ts index 34fb326d5f1..260e677da09 100644 --- a/components/statistic/statistic-number.component.ts +++ b/components/statistic/statistic-number.component.ts @@ -7,7 +7,7 @@ import { getLocaleNumberSymbol, NgIf, NgTemplateOutlet, NumberSymbol } from '@an import { ChangeDetectionStrategy, Component, - Inject, + inject, Input, LOCALE_ID, OnChanges, @@ -46,7 +46,7 @@ export class NzStatisticNumberComponent implements OnChanges { displayInt = ''; displayDecimal = ''; - constructor(@Inject(LOCALE_ID) private locale_id: string) {} + private locale_id = inject(LOCALE_ID); ngOnChanges(): void { this.formatNumber(); diff --git a/components/statistic/statistic.component.ts b/components/statistic/statistic.component.ts index dd27352f2a6..26bf3a18872 100644 --- a/components/statistic/statistic.component.ts +++ b/components/statistic/statistic.component.ts @@ -12,10 +12,10 @@ import { Input, OnDestroy, OnInit, - Optional, TemplateRef, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -72,11 +72,8 @@ export class NzStatisticComponent implements OnDestroy, OnInit { dir: Direction = 'ltr'; private destroy$ = new Subject(); - - constructor( - protected cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality - ) {} + protected cdr = inject(ChangeDetectorRef); + private directionality = inject(Directionality); ngOnInit(): void { this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => { diff --git a/components/steps/steps.component.ts b/components/steps/steps.component.ts index 2ce6d290a3f..6b2244309d1 100644 --- a/components/steps/steps.component.ts +++ b/components/steps/steps.component.ts @@ -15,7 +15,6 @@ import { NgZone, OnChanges, OnInit, - Optional, Output, QueryList, SimpleChanges, @@ -93,7 +92,7 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit { constructor( private ngZone: NgZone, private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality, + private directionality: Directionality, private destroy$: NzDestroyService ) {} diff --git a/components/switch/switch.component.ts b/components/switch/switch.component.ts index b651f95b416..5766b54e4c2 100644 --- a/components/switch/switch.component.ts +++ b/components/switch/switch.component.ts @@ -17,7 +17,6 @@ import { NgZone, OnDestroy, OnInit, - Optional, TemplateRef, ViewChild, ViewEncapsulation, @@ -122,7 +121,7 @@ export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit, O private ngZone: NgZone, private cdr: ChangeDetectorRef, private focusMonitor: FocusMonitor, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/table/src/cell/cell.directive.ts b/components/table/src/cell/cell.directive.ts index 51f5b976aaa..b30f58a2fd6 100644 --- a/components/table/src/cell/cell.directive.ts +++ b/components/table/src/cell/cell.directive.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directive, Optional } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { NzTableStyleService } from '../table-style.service'; @@ -15,8 +15,5 @@ import { NzTableStyleService } from '../table-style.service'; standalone: true }) export class NzTableCellDirective { - isInsideTable = false; - constructor(@Optional() nzTableStyleService: NzTableStyleService) { - this.isInsideTable = !!nzTableStyleService; - } + isInsideTable = !!inject(NzTableStyleService, { optional: true }); } diff --git a/components/table/src/table/table.component.ts b/components/table/src/table/table.component.ts index 363498ac389..a50425630ac 100644 --- a/components/table/src/table/table.component.ts +++ b/components/table/src/table/table.component.ts @@ -18,7 +18,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Output, SimpleChanges, TemplateRef, @@ -232,7 +231,7 @@ export class NzTableComponent implements OnInit, OnDestroy, OnChanges, AfterV private cdr: ChangeDetectorRef, private nzTableStyleService: NzTableStyleService, private nzTableDataService: NzTableDataService, - @Optional() private directionality: Directionality + private directionality: Directionality ) { this.nzConfigService .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME) diff --git a/components/table/src/table/tbody.component.ts b/components/table/src/table/tbody.component.ts index 507eacf3457..aed866afa1e 100644 --- a/components/table/src/table/tbody.component.ts +++ b/components/table/src/table/tbody.component.ts @@ -6,7 +6,7 @@ /* eslint-disable @angular-eslint/component-selector */ import { AsyncPipe } from '@angular/common'; -import { ChangeDetectionStrategy, Component, OnDestroy, Optional, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnDestroy, TemplateRef, ViewEncapsulation, inject } from '@angular/core'; import { BehaviorSubject, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -51,8 +51,9 @@ export class NzTbodyComponent implements OnDestroy { noResult$ = new BehaviorSubject | undefined>(undefined); listOfMeasureColumn$ = new BehaviorSubject([]); private destroy$ = new Subject(); + private nzTableStyleService = inject(NzTableStyleService, { optional: true }); - constructor(@Optional() private nzTableStyleService: NzTableStyleService) { + constructor() { this.isInsideTable = !!this.nzTableStyleService; if (this.nzTableStyleService) { const { showEmpty$, noResult$, listOfMeasureColumn$ } = this.nzTableStyleService; @@ -63,7 +64,7 @@ export class NzTbodyComponent implements OnDestroy { } onListOfAutoWidthChange(listOfAutoWidth: number[]): void { - this.nzTableStyleService.setListOfAutoWidth(listOfAutoWidth); + this.nzTableStyleService?.setListOfAutoWidth(listOfAutoWidth); } ngOnDestroy(): void { diff --git a/components/table/src/table/thead.component.ts b/components/table/src/table/thead.component.ts index 6c9f8d27bf1..c30b34f3e71 100644 --- a/components/table/src/table/thead.component.ts +++ b/components/table/src/table/thead.component.ts @@ -15,15 +15,15 @@ import { EventEmitter, OnDestroy, OnInit, - Optional, Output, QueryList, Renderer2, TemplateRef, ViewChild, - ViewEncapsulation + ViewEncapsulation, + inject } from '@angular/core'; -import { EMPTY, merge, Observable, of, Subject } from 'rxjs'; +import { EMPTY, Observable, Subject, merge, of } from 'rxjs'; import { delay, map, mergeMap, startWith, switchMap, takeUntil } from 'rxjs/operators'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; @@ -58,11 +58,12 @@ export class NzTheadComponent implements AfterContentInit, OnDestroy, AfterVi >; @Output() readonly nzSortOrderChange = new EventEmitter<{ key: NzSafeAny; value: string | null }>(); + private nzTableStyleService = inject(NzTableStyleService, { optional: true }); + private nzTableDataService: NzTableDataService | null = inject(NzTableDataService, { optional: true }); + constructor( private elementRef: ElementRef, - private renderer: Renderer2, - @Optional() private nzTableStyleService: NzTableStyleService, - @Optional() private nzTableDataService: NzTableDataService + private renderer: Renderer2 ) { this.isInsideTable = !!this.nzTableStyleService; } @@ -83,12 +84,12 @@ export class NzTheadComponent implements AfterContentInit, OnDestroy, AfterVi switchMap(firstTableRow => (firstTableRow ? firstTableRow.listOfColumnsChanges$ : EMPTY)), takeUntil(this.destroy$) ); - listOfColumnsChanges$.subscribe(data => this.nzTableStyleService.setListOfTh(data)); + listOfColumnsChanges$.subscribe(data => this.nzTableStyleService!.setListOfTh(data)); /** TODO: need reset the measure row when scrollX change **/ this.nzTableStyleService.enableAutoMeasure$ .pipe(switchMap(enable => (enable ? listOfColumnsChanges$ : of([])))) .pipe(takeUntil(this.destroy$)) - .subscribe(data => this.nzTableStyleService.setListOfMeasureColumn(data)); + .subscribe(data => this.nzTableStyleService!.setListOfMeasureColumn(data)); const listOfFixedLeftColumnChanges$ = firstTableRow$.pipe( switchMap(firstTr => (firstTr ? firstTr.listOfFixedLeftColumnChanges$ : EMPTY)), takeUntil(this.destroy$) @@ -98,12 +99,13 @@ export class NzTheadComponent implements AfterContentInit, OnDestroy, AfterVi takeUntil(this.destroy$) ); listOfFixedLeftColumnChanges$.subscribe(listOfFixedLeftColumn => { - this.nzTableStyleService.setHasFixLeft(listOfFixedLeftColumn.length !== 0); + this.nzTableStyleService!.setHasFixLeft(listOfFixedLeftColumn.length !== 0); }); listOfFixedRightColumnChanges$.subscribe(listOfFixedRightColumn => { - this.nzTableStyleService.setHasFixRight(listOfFixedRightColumn.length !== 0); + this.nzTableStyleService!.setHasFixRight(listOfFixedRightColumn.length !== 0); }); } + if (this.nzTableDataService) { const listOfColumn$ = this.listOfNzThAddOnComponent.changes.pipe( startWith(this.listOfNzThAddOnComponent) @@ -145,7 +147,7 @@ export class NzTheadComponent implements AfterContentInit, OnDestroy, AfterVi takeUntil(this.destroy$) ); listOfCalcOperator$.subscribe(list => { - this.nzTableDataService.listOfCalcOperator$.next(list); + this.nzTableDataService?.listOfCalcOperator$.next(list); }); } } diff --git a/components/table/src/table/tr.directive.ts b/components/table/src/table/tr.directive.ts index 74823eac3b3..323f3a98c56 100644 --- a/components/table/src/table/tr.directive.ts +++ b/components/table/src/table/tr.directive.ts @@ -3,8 +3,8 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { AfterContentInit, ContentChildren, Directive, OnDestroy, Optional, QueryList } from '@angular/core'; -import { combineLatest, merge, Observable, ReplaySubject, Subject } from 'rxjs'; +import { AfterContentInit, ContentChildren, Directive, OnDestroy, QueryList, inject } from '@angular/core'; +import { Observable, ReplaySubject, Subject, combineLatest, merge } from 'rxjs'; import { map, mergeMap, startWith, switchMap, takeUntil } from 'rxjs/operators'; import { NzCellFixedDirective } from '../cell/cell-fixed.directive'; @@ -47,11 +47,9 @@ export class NzTrDirective implements AfterContentInit, OnDestroy { ), takeUntil(this.destroy$) ); - isInsideTable = false; - constructor(@Optional() private nzTableStyleService: NzTableStyleService) { - this.isInsideTable = !!nzTableStyleService; - } + private nzTableStyleService = inject(NzTableStyleService, { optional: true }); + isInsideTable = !!this.nzTableStyleService; ngAfterContentInit(): void { if (this.nzTableStyleService) { diff --git a/components/tabs/tab-link.directive.ts b/components/tabs/tab-link.directive.ts index 1b9209915be..cb459d1275f 100644 --- a/components/tabs/tab-link.directive.ts +++ b/components/tabs/tab-link.directive.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directive, ElementRef, Host, Optional, Self, TemplateRef } from '@angular/core'; +import { Directive, ElementRef, TemplateRef, inject } from '@angular/core'; import { RouterLink } from '@angular/router'; import { TabTemplateContext } from './interfaces'; @@ -17,7 +17,7 @@ import { TabTemplateContext } from './interfaces'; standalone: true }) export class NzTabLinkTemplateDirective { - constructor(@Host() public templateRef: TemplateRef) {} + templateRef: TemplateRef = inject(TemplateRef, { host: true }); } /** @@ -29,8 +29,7 @@ export class NzTabLinkTemplateDirective { standalone: true }) export class NzTabLinkDirective { - constructor( - public elementRef: ElementRef, - @Optional() @Self() public routerLink?: RouterLink - ) {} + routerLink = inject(RouterLink, { self: true, optional: true }); + + constructor(public elementRef: ElementRef) {} } diff --git a/components/tabs/tab-nav-bar.component.ts b/components/tabs/tab-nav-bar.component.ts index 9e8bf9f9289..4afbef2335b 100644 --- a/components/tabs/tab-nav-bar.component.ts +++ b/components/tabs/tab-nav-bar.component.ts @@ -22,7 +22,6 @@ import { NgZone, OnChanges, OnDestroy, - Optional, Output, QueryList, SimpleChanges, @@ -190,7 +189,7 @@ export class NzTabNavBarComponent implements AfterViewInit, AfterContentChecked, private ngZone: NgZone, private viewportRuler: ViewportRuler, private nzResizeObserver: NzResizeObserver, - @Optional() private dir: Directionality + private dir: Directionality ) {} ngAfterViewInit(): void { diff --git a/components/tabs/tab.component.ts b/components/tabs/tab.component.ts index 388452a2d9c..daa2a389a21 100644 --- a/components/tabs/tab.component.ts +++ b/components/tabs/tab.component.ts @@ -8,7 +8,6 @@ import { Component, ContentChild, EventEmitter, - Inject, InjectionToken, Input, OnChanges, @@ -18,7 +17,8 @@ import { TemplateRef, ViewChild, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Subject } from 'rxjs'; @@ -66,6 +66,7 @@ export class NzTabComponent implements OnChanges, OnDestroy { isActive: boolean = false; position: number | null = null; origin: number | null = null; + closestTabSet = inject(NZ_TAB_SET); readonly stateChanges = new Subject(); get content(): TemplateRef { @@ -76,8 +77,6 @@ export class NzTabComponent implements OnChanges, OnDestroy { return this.nzTitle || this.nzTabLinkTemplateDirective?.templateRef; } - constructor(@Inject(NZ_TAB_SET) public closestTabSet: NzSafeAny) {} - ngOnChanges(changes: SimpleChanges): void { const { nzTitle, nzDisabled, nzForceRender } = changes; if (nzTitle || nzDisabled || nzForceRender) { diff --git a/components/tabs/tabs-ink-bar.directive.ts b/components/tabs/tabs-ink-bar.directive.ts index 82c3b414787..6179e74bd8e 100644 --- a/components/tabs/tabs-ink-bar.directive.ts +++ b/components/tabs/tabs-ink-bar.directive.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directive, ElementRef, Inject, Input, NgZone, Optional } from '@angular/core'; +import { Directive, ElementRef, Input, NgZone, inject } from '@angular/core'; import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations'; import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill'; @@ -22,14 +22,14 @@ export class NzTabsInkBarDirective { @Input() position: NzTabPositionMode = 'horizontal'; @Input() animated = true; + animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true }); get _animated(): boolean { return this.animationMode !== 'NoopAnimations' && this.animated; } constructor( private elementRef: ElementRef, - private ngZone: NgZone, - @Optional() @Inject(ANIMATION_MODULE_TYPE) public animationMode?: string + private ngZone: NgZone ) {} alignToElement(element: HTMLElement): void { diff --git a/components/tabs/tabset.component.ts b/components/tabs/tabset.component.ts index 937346c7f8d..5a6730d70a6 100644 --- a/components/tabs/tabset.component.ts +++ b/components/tabs/tabset.component.ts @@ -18,11 +18,11 @@ import { Component, ContentChildren, EventEmitter, + inject, Input, NgZone, OnDestroy, OnInit, - Optional, Output, QueryList, TemplateRef, @@ -244,13 +244,13 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy private tabLabelSubscription = Subscription.EMPTY; private tabsSubscription = Subscription.EMPTY; private canDeactivateSubscription = Subscription.EMPTY; + private router = inject(Router, { optional: true }); constructor( public nzConfigService: NzConfigService, private ngZone: NgZone, private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality, - @Optional() private router: Router + private directionality: Directionality ) { this.tabSetId = nextId++; } @@ -470,7 +470,7 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy } private updateRouterActive(): void { - if (this.router.navigated) { + if (this.router?.navigated) { const index = this.findShouldActiveTabIndex(); if (index !== this.selectedIndex) { this.setSelectedIndex(index); @@ -489,10 +489,10 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy }); } - private isLinkActive(router: Router): (link?: RouterLink) => boolean { - return (link?: RouterLink) => + private isLinkActive(router: Router | null): (link?: RouterLink | null) => boolean { + return (link?: RouterLink | null) => link - ? router.isActive(link.urlTree || '', { + ? !!router?.isActive(link.urlTree || '', { paths: this.nzLinkExact ? 'exact' : 'subset', queryParams: this.nzLinkExact ? 'exact' : 'subset', fragment: 'ignored', diff --git a/components/tag/tag.component.ts b/components/tag/tag.component.ts index e6854662952..6699071fb9e 100644 --- a/components/tag/tag.component.ts +++ b/components/tag/tag.component.ts @@ -16,7 +16,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Output, Renderer2, SimpleChanges, @@ -80,7 +79,7 @@ export class NzTagComponent implements OnChanges, OnDestroy, OnInit { private cdr: ChangeDetectorRef, private renderer: Renderer2, private elementRef: ElementRef, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} updateCheckedStatus(): void { diff --git a/components/time-picker/time-picker.component.ts b/components/time-picker/time-picker.component.ts index fadd016204a..c10d76f54a5 100644 --- a/components/time-picker/time-picker.component.ts +++ b/components/time-picker/time-picker.component.ts @@ -5,7 +5,7 @@ import { Direction, Directionality } from '@angular/cdk/bidi'; import { CdkOverlayOrigin, ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay'; -import { _getEventTarget, Platform } from '@angular/cdk/platform'; +import { Platform, _getEventTarget } from '@angular/cdk/platform'; import { AsyncPipe, NgClass, NgIf } from '@angular/common'; import { AfterViewInit, @@ -18,14 +18,14 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Output, Renderer2, SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Observable, Subject, of } from 'rxjs'; @@ -354,6 +354,9 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte this.close(); } + private nzFormStatusService = inject(NzFormStatusService, { optional: true }); + private nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); + constructor( public nzConfigService: NzConfigService, protected i18n: NzI18nService, @@ -362,9 +365,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte private cdr: ChangeDetectorRef, private dateHelper: DateHelperService, private platform: Platform, - @Optional() private directionality: Directionality, - @Optional() private nzFormStatusService?: NzFormStatusService, - @Optional() private nzFormNoStatusService?: NzFormNoStatusService + private directionality: Directionality ) {} ngOnInit(): void { diff --git a/components/timeline/timeline.component.ts b/components/timeline/timeline.component.ts index 35d3d4e9f70..9447242f25b 100644 --- a/components/timeline/timeline.component.ts +++ b/components/timeline/timeline.component.ts @@ -15,7 +15,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, QueryList, SimpleChange, SimpleChanges, @@ -99,7 +98,7 @@ export class NzTimelineComponent implements AfterContentInit, OnChanges, OnDestr constructor( private cdr: ChangeDetectorRef, private timelineService: TimelineService, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} ngOnChanges(changes: SimpleChanges): void { diff --git a/components/tooltip/base.ts b/components/tooltip/base.ts index f7a4487f21f..df3ee840d6a 100644 --- a/components/tooltip/base.ts +++ b/components/tooltip/base.ts @@ -16,7 +16,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, PLATFORM_ID, Renderer2, SimpleChanges, @@ -334,6 +333,10 @@ export abstract class NzTooltipBaseDirective implements AfterViewInit, OnChanges export abstract class NzTooltipBaseComponent implements OnDestroy, OnInit { @ViewChild('overlay', { static: false }) overlay!: CdkConnectedOverlay; + noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); + cdr = inject(ChangeDetectorRef); + private directionality = inject(Directionality); + nzTitle: NzTSType | null = null; nzContent: NzTSType | null = null; nzArrowPointAtCenter: boolean = false; @@ -389,12 +392,6 @@ export abstract class NzTooltipBaseComponent implements OnDestroy, OnInit { protected destroy$ = new Subject(); - constructor( - public cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality, - public noAnimation?: NzNoAnimationDirective - ) {} - ngOnInit(): void { this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => { this.dir = direction; diff --git a/components/tooltip/tooltip.ts b/components/tooltip/tooltip.ts index 1c721e2b000..7fe627e3427 100644 --- a/components/tooltip/tooltip.ts +++ b/components/tooltip/tooltip.ts @@ -3,20 +3,16 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directionality } from '@angular/cdk/bidi'; import { OverlayModule } from '@angular/cdk/overlay'; import { NgClass, NgStyle } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, - ChangeDetectorRef, Component, Directive, ElementRef, EventEmitter, - Host, Input, - Optional, Output, ViewEncapsulation } from '@angular/core'; @@ -128,14 +124,6 @@ export class NzToolTipComponent extends NzTooltipBaseComponent { _contentStyleMap: NgStyleInterface = {}; - constructor( - cdr: ChangeDetectorRef, - @Optional() directionality: Directionality, - @Host() @Optional() noAnimation?: NzNoAnimationDirective - ) { - super(cdr, directionality, noAnimation); - } - protected isEmpty(): boolean { return isTooltipEmpty(this.nzTitle); } diff --git a/components/transfer/transfer.component.ts b/components/transfer/transfer.component.ts index 3977a7dbcee..e9bba1b9189 100644 --- a/components/transfer/transfer.component.ts +++ b/components/transfer/transfer.component.ts @@ -15,7 +15,6 @@ import { OnChanges, OnDestroy, OnInit, - Optional, Output, QueryList, Renderer2, @@ -23,7 +22,8 @@ import { TemplateRef, ViewChildren, ViewEncapsulation, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Observable, Subject, of as observableOf, of } from 'rxjs'; import { distinctUntilChanged, map, takeUntil, withLatestFrom } from 'rxjs/operators'; @@ -292,6 +292,9 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { this.markForCheckAllList(); } + private nzFormStatusService = inject(NzFormStatusService, { optional: true }); + private nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); + // #endregion constructor( @@ -299,9 +302,7 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { private i18n: NzI18nService, private elementRef: ElementRef, private renderer: Renderer2, - @Optional() private directionality: Directionality, - @Optional() private nzFormStatusService?: NzFormStatusService, - @Optional() private nzFormNoStatusService?: NzFormNoStatusService + private directionality: Directionality ) {} private markForCheckAllList(): void { diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts index 10ae31ab626..51ca96e773e 100644 --- a/components/tree-select/tree-select.component.ts +++ b/components/tree-select/tree-select.component.ts @@ -20,12 +20,10 @@ import { ContentChild, ElementRef, EventEmitter, - Host, Input, OnChanges, OnDestroy, OnInit, - Optional, Output, Renderer2, SimpleChanges, @@ -33,6 +31,7 @@ import { ViewChild, booleanAttribute, forwardRef, + inject, numberAttribute } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @@ -354,17 +353,18 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc return this.nzMultiple || this.nzCheckable; } + noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); + nzFormStatusService = inject(NzFormStatusService, { optional: true }); + private nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); + constructor( nzTreeService: NzTreeSelectService, public nzConfigService: NzConfigService, private renderer: Renderer2, private cdr: ChangeDetectorRef, private elementRef: ElementRef, - @Optional() private directionality: Directionality, - private focusMonitor: FocusMonitor, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective, - @Optional() public nzFormStatusService?: NzFormStatusService, - @Optional() private nzFormNoStatusService?: NzFormNoStatusService + private directionality: Directionality, + private focusMonitor: FocusMonitor ) { super(nzTreeService); diff --git a/components/tree-view/outlet.ts b/components/tree-view/outlet.ts index b56a7ad5c49..2ee998261f7 100644 --- a/components/tree-view/outlet.ts +++ b/components/tree-view/outlet.ts @@ -3,10 +3,8 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { CdkTreeNodeOutlet, CDK_TREE_NODE_OUTLET_NODE } from '@angular/cdk/tree'; -import { Directive, Inject, Optional, ViewContainerRef } from '@angular/core'; - -import { NzSafeAny } from 'ng-zorro-antd/core/types'; +import { CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet } from '@angular/cdk/tree'; +import { Directive, ViewContainerRef, inject } from '@angular/core'; @Directive({ selector: '[nzTreeNodeOutlet]', @@ -19,8 +17,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types'; standalone: true }) export class NzTreeNodeOutletDirective implements CdkTreeNodeOutlet { - constructor( - public viewContainer: ViewContainerRef, - @Inject(CDK_TREE_NODE_OUTLET_NODE) @Optional() public _node?: NzSafeAny - ) {} + _node = inject(CDK_TREE_NODE_OUTLET_NODE, { optional: true }); + + constructor(public viewContainer: ViewContainerRef) {} } diff --git a/components/tree-view/tree.ts b/components/tree-view/tree.ts index 6fc5183cc38..c611e0fcbfc 100644 --- a/components/tree-view/tree.ts +++ b/components/tree-view/tree.ts @@ -9,15 +9,14 @@ import { CdkTree, TreeControl } from '@angular/cdk/tree'; import { ChangeDetectorRef, Component, - Host, Input, IterableDiffer, IterableDiffers, OnDestroy, OnInit, - Optional, ViewContainerRef, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Observable, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -45,11 +44,12 @@ export class NzTreeView extends CdkTree implements OnInit, OnDestroy { @Input({ transform: booleanAttribute }) nzDirectoryTree = false; @Input({ transform: booleanAttribute }) nzBlockNode = false; + noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); + constructor( protected differs: IterableDiffers, protected changeDetectorRef: ChangeDetectorRef, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective, - @Optional() private directionality?: Directionality + private directionality: Directionality ) { super(differs, changeDetectorRef); } @@ -57,13 +57,11 @@ export class NzTreeView extends CdkTree implements OnInit, OnDestroy { override ngOnInit(): void { super.ngOnInit(); - if (this.directionality) { - this.dir = this.directionality.value; - this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => { - this.dir = direction; - this.changeDetectorRef.detectChanges(); - }); - } + this.dir = this.directionality.value; + this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => { + this.dir = direction; + this.changeDetectorRef.detectChanges(); + }); } override ngOnDestroy(): void { diff --git a/components/tree/tree-node.component.ts b/components/tree/tree-node.component.ts index 216eb886fd8..b1d6e7f1fd3 100644 --- a/components/tree/tree-node.component.ts +++ b/components/tree/tree-node.component.ts @@ -10,18 +10,17 @@ import { Component, ElementRef, EventEmitter, - Host, Input, NgZone, OnChanges, OnDestroy, OnInit, - Optional, Output, Renderer2, SimpleChange, TemplateRef, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { Observable, Subject, fromEvent } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -406,13 +405,14 @@ export class NzTreeNodeBuiltinComponent implements OnInit, OnChanges, OnDestroy this.cdr.markForCheck(); } + noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); + constructor( public nzTreeService: NzTreeBaseService, private ngZone: NgZone, private renderer: Renderer2, private elementRef: ElementRef, - private cdr: ChangeDetectorRef, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective + private cdr: ChangeDetectorRef ) {} ngOnInit(): void { diff --git a/components/tree/tree.component.ts b/components/tree/tree.component.ts index 84f2ca20831..daa66154e57 100644 --- a/components/tree/tree.component.ts +++ b/components/tree/tree.component.ts @@ -13,12 +13,10 @@ import { Component, ContentChild, EventEmitter, - Host, Input, OnChanges, OnDestroy, OnInit, - Optional, Output, SimpleChange, TemplateRef, @@ -474,12 +472,13 @@ export class NzTreeComponent } // Handle emit event end + noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); + constructor( nzTreeService: NzTreeBaseService, public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective + private directionality: Directionality ) { super(nzTreeService); } diff --git a/components/typography/typography.component.ts b/components/typography/typography.component.ts index a1035a8a7ca..4b02e584a55 100644 --- a/components/typography/typography.component.ts +++ b/components/typography/typography.component.ts @@ -14,12 +14,10 @@ import { ElementRef, EmbeddedViewRef, EventEmitter, - Inject, Input, OnChanges, OnDestroy, OnInit, - Optional, Output, Renderer2, SimpleChanges, @@ -28,6 +26,7 @@ import { ViewContainerRef, ViewEncapsulation, booleanAttribute, + inject, numberAttribute } from '@angular/core'; import { Subject, Subscription } from 'rxjs'; @@ -36,7 +35,7 @@ import { takeUntil } from 'rxjs/operators'; import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; import { cancelRequestAnimationFrame, reqAnimFrame } from 'ng-zorro-antd/core/polyfill'; import { NzResizeService } from 'ng-zorro-antd/core/services'; -import { NzSafeAny, NzTSType } from 'ng-zorro-antd/core/types'; +import { NzTSType } from 'ng-zorro-antd/core/types'; import { isStyleSupport, measure } from 'ng-zorro-antd/core/util'; import { NzI18nService, NzTextI18nInterface } from 'ng-zorro-antd/i18n'; @@ -154,7 +153,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, @ViewChild('contentTemplate', { static: false }) contentTemplate?: TemplateRef<{ content: string }>; locale!: NzTextI18nInterface; - document: Document; + private document: Document = inject(DOCUMENT); expandableBtnElementCache: HTMLElement | null = null; editing = false; ellipsisText: string | undefined; @@ -192,12 +191,9 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, private renderer: Renderer2, private platform: Platform, private i18n: NzI18nService, - @Inject(DOCUMENT) document: NzSafeAny, private resizeService: NzResizeService, - @Optional() private directionality: Directionality - ) { - this.document = document; - } + private directionality: Directionality + ) {} onTextCopy(text: string): void { this.nzCopy.emit(text); diff --git a/components/upload/upload-btn.component.ts b/components/upload/upload-btn.component.ts index acf801b556c..4a93938528e 100644 --- a/components/upload/upload-btn.component.ts +++ b/components/upload/upload-btn.component.ts @@ -10,13 +10,13 @@ import { ElementRef, Input, NgZone, - OnInit, OnDestroy, - Optional, + OnInit, ViewChild, - ViewEncapsulation + ViewEncapsulation, + inject } from '@angular/core'; -import { fromEvent, Observable, of, Subject, Subscription } from 'rxjs'; +import { Observable, Subject, Subscription, fromEvent, of } from 'rxjs'; import { map, switchMap, takeUntil, tap } from 'rxjs/operators'; import { warn } from 'ng-zorro-antd/core/logger'; @@ -310,7 +310,7 @@ export class NzUploadBtnComponent implements OnInit, OnDestroy { withCredentials: args.withCredentials, headers: new HttpHeaders(args.headers) }); - return this.http.request(req).subscribe( + return this.http!.request(req).subscribe( (event: HttpEvent) => { if (event.type === HttpEventType.UploadProgress) { if (event.total! > 0) { @@ -344,12 +344,13 @@ export class NzUploadBtnComponent implements OnInit, OnDestroy { } } + private http = inject(HttpClient, { optional: true }); + constructor( private ngZone: NgZone, - @Optional() private http: HttpClient, private elementRef: ElementRef ) { - if (!http) { + if (!this.http) { throw new Error( `Not found 'HttpClient', You can configure 'HttpClient' with 'provideHttpClient()' in your root module.` ); diff --git a/components/upload/upload-list.component.ts b/components/upload/upload-list.component.ts index 8a15946a158..66ae1072cd4 100644 --- a/components/upload/upload-list.component.ts +++ b/components/upload/upload-list.component.ts @@ -20,15 +20,15 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, - Inject, Input, NgZone, OnChanges, OnDestroy, - ViewEncapsulation + ViewEncapsulation, + inject } from '@angular/core'; -import { fromEvent, Observable, of, Subject } from 'rxjs'; -import { takeUntil, map } from 'rxjs/operators'; +import { Observable, Subject, fromEvent, of } from 'rxjs'; +import { map, takeUntil } from 'rxjs/operators'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; @@ -111,6 +111,7 @@ export class NzUploadListComponent implements OnChanges, OnDestroy { @Input() iconRender: NzIconRenderTemplate | null = null; @Input() dir: Direction = 'ltr'; + private document: Document = inject(DOCUMENT); private destroy$ = new Subject(); private genErr(file: NzUploadFile): string { @@ -164,11 +165,11 @@ export class NzUploadListComponent implements OnChanges, OnDestroy { return of(''); } - const canvas = this.doc.createElement('canvas'); + const canvas = this.document.createElement('canvas'); canvas.width = MEASURE_SIZE; canvas.height = MEASURE_SIZE; canvas.style.cssText = `position: fixed; left: 0; top: 0; width: ${MEASURE_SIZE}px; height: ${MEASURE_SIZE}px; z-index: 9999; display: none;`; - this.doc.body.appendChild(canvas); + this.document.body.appendChild(canvas); const ctx = canvas.getContext('2d'); const img = new Image(); const objectUrl = URL.createObjectURL(file); @@ -194,7 +195,7 @@ export class NzUploadListComponent implements OnChanges, OnDestroy { ctx!.drawImage(img, offsetX, offsetY, drawWidth, drawHeight); } catch {} const dataURL = canvas.toDataURL(); - this.doc.body.removeChild(canvas); + this.document.body.removeChild(canvas); URL.revokeObjectURL(objectUrl); return dataURL; @@ -282,7 +283,6 @@ export class NzUploadListComponent implements OnChanges, OnDestroy { constructor( private cdr: ChangeDetectorRef, - @Inject(DOCUMENT) private doc: NzSafeAny, private ngZone: NgZone, private platform: Platform ) {} diff --git a/components/upload/upload.component.ts b/components/upload/upload.component.ts index 722cdb35b63..f8962c3a97c 100644 --- a/components/upload/upload.component.ts +++ b/components/upload/upload.component.ts @@ -12,13 +12,11 @@ import { ChangeDetectorRef, Component, EventEmitter, - Inject, Input, NgZone, OnChanges, OnDestroy, OnInit, - Optional, Output, TemplateRef, ViewChild, @@ -95,6 +93,7 @@ export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDe @Input() nzName = 'file'; private _showUploadList: boolean | NzShowUploadList = true; + private document: Document = inject(DOCUMENT); @Input() set nzShowUploadList(value: boolean | NzShowUploadList) { @@ -180,10 +179,9 @@ export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDe constructor( private ngZone: NgZone, - @Inject(DOCUMENT) private document: NzSafeAny, private cdr: ChangeDetectorRef, private i18n: NzI18nService, - @Optional() private directionality: Directionality + private directionality: Directionality ) {} // #region upload diff --git a/components/water-mark/water-mark.component.ts b/components/water-mark/water-mark.component.ts index 9bb40840783..4553495efb5 100644 --- a/components/water-mark/water-mark.component.ts +++ b/components/water-mark/water-mark.component.ts @@ -10,12 +10,12 @@ import { ChangeDetectorRef, Component, ElementRef, - Inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, + inject, numberAttribute } from '@angular/core'; @@ -50,6 +50,8 @@ export class NzWaterMarkComponent implements AfterViewInit, OnInit, OnChanges, O @Input() nzGap: [number, number] = [100, 100]; @Input() nzOffset: [number, number] = [this.nzGap[0] / 2, this.nzGap[1] / 2]; + private document: Document = inject(DOCUMENT); + waterMarkElement: HTMLDivElement = this.document.createElement('div'); stopObservation: boolean = false; @@ -67,7 +69,6 @@ export class NzWaterMarkComponent implements AfterViewInit, OnInit, OnChanges, O constructor( private el: ElementRef, - @Inject(DOCUMENT) private document: Document, private cdr: ChangeDetectorRef ) {} diff --git a/scripts/site/_site/doc/app/app.component.ts b/scripts/site/_site/doc/app/app.component.ts index 4f0e77c82ec..bd3f8f4c9e0 100644 --- a/scripts/site/_site/doc/app/app.component.ts +++ b/scripts/site/_site/doc/app/app.component.ts @@ -1,6 +1,6 @@ import { Platform } from '@angular/cdk/platform'; import { DOCUMENT } from '@angular/common'; -import { ChangeDetectorRef, Component, Inject, NgZone, OnInit, Renderer2 } from '@angular/core'; +import { ChangeDetectorRef, Component, NgZone, OnInit, Renderer2, inject } from '@angular/core'; import { Meta, Title } from '@angular/platform-browser'; import { NavigationEnd, NavigationStart, Router } from '@angular/router'; import { NzColor } from 'ng-zorro-antd/color-picker'; @@ -60,6 +60,8 @@ export class AppComponent implements OnInit { direction: 'ltr' | 'rtl' = 'ltr'; currentVersion = VERSION.full; + private document: Document = inject(DOCUMENT); + switchLanguage(language: string): void { const url = this.router.url.split('/'); url.splice(-1); @@ -147,8 +149,7 @@ export class AppComponent implements OnInit { private platform: Platform, private meta: Meta, private renderer: Renderer2, - private cdr: ChangeDetectorRef, - @Inject(DOCUMENT) private document: any + private cdr: ChangeDetectorRef ) { } navigateToPage(url: string): void { diff --git a/scripts/site/_site/doc/app/online-ide/online-ide.service.ts b/scripts/site/_site/doc/app/online-ide/online-ide.service.ts index 3c243389356..ac19339ce02 100644 --- a/scripts/site/_site/doc/app/online-ide/online-ide.service.ts +++ b/scripts/site/_site/doc/app/online-ide/online-ide.service.ts @@ -1,5 +1,5 @@ import { DOCUMENT } from '@angular/common'; -import { Inject, Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import sdk from '@stackblitz/sdk'; import { getParameters } from 'codesandbox/lib/api/define'; @@ -16,7 +16,7 @@ import polyfillTS from './files/polyfill'; providedIn: 'root' }) export class OnlineIdeService { - document: Document; + private document: Document = inject(DOCUMENT); template = 'angular-cli' as const; dependencies = { '@angular/animations': '^18.0.0', @@ -43,10 +43,6 @@ export class OnlineIdeService { 'monaco-editor': '^0.33.0' }; - constructor(@Inject(DOCUMENT) document: any) { - this.document = document; - } - openOnStackBlitz(componentName: string, appComponentCode: string, selector: string): void { sdk.openProject({ title: 'NG-ZORRO', diff --git a/scripts/site/_site/doc/app/share/codebox/codebox.component.ts b/scripts/site/_site/doc/app/share/codebox/codebox.component.ts index 4f13923a7d1..3d6832c7f70 100644 --- a/scripts/site/_site/doc/app/share/codebox/codebox.component.ts +++ b/scripts/site/_site/doc/app/share/codebox/codebox.component.ts @@ -4,11 +4,11 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, - Inject, Input, OnDestroy, OnInit, - ViewEncapsulation + ViewEncapsulation, + inject } from '@angular/core'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import { Observable, Subject } from 'rxjs'; @@ -28,6 +28,7 @@ import { OnlineIdeService } from '../../online-ide/online-ide.service'; } }) export class NzCodeBoxComponent implements OnInit, OnDestroy { + private document: Document = inject(DOCUMENT); highlightCode?: string; copied = false; commandCopied = false; @@ -96,14 +97,14 @@ export class NzCodeBoxComponent implements OnInit, OnDestroy { // @ts-ignore let copyTextArea = null as HTMLTextAreaElement; try { - copyTextArea = this.dom.createElement('textarea'); + copyTextArea = this.document.createElement('textarea'); copyTextArea.style.height = '0px'; copyTextArea.style.opacity = '0'; copyTextArea.style.width = '0px'; - this.dom.body.appendChild(copyTextArea); + this.document.body.appendChild(copyTextArea); copyTextArea.value = value; copyTextArea.select(); - this.dom.execCommand('copy'); + this.document.execCommand('copy'); resolve(value); } finally { if (copyTextArea && copyTextArea.parentNode) { @@ -143,7 +144,6 @@ export class NzCodeBoxComponent implements OnInit, OnDestroy { } constructor( - @Inject(DOCUMENT) private dom: any, private sanitizer: DomSanitizer, private cdr: ChangeDetectorRef, private appService: AppService,