From f0c5aeeccdcf6417fee5fe202dcd3095eaea2080 Mon Sep 17 00:00:00 2001 From: cipchk Date: Thu, 18 Jan 2024 19:46:06 +0800 Subject: [PATCH] perf(*): use `inject` instead `constructor` --- .../abc/auto-focus/auto-focus.directive.ts | 2 +- .../abc/avatar-list/avatar-list.component.ts | 26 +++++------- packages/abc/cell/cell-host.directive.ts | 10 ++--- packages/abc/cell/cell.component.ts | 36 +++++++--------- packages/abc/cell/cell.service.ts | 12 +++--- packages/abc/date-picker/range.directive.ts | 22 +++++----- packages/abc/down-file/down-file.directive.ts | 26 ++++++------ packages/abc/ellipsis/ellipsis.component.ts | 40 ++++++++---------- .../error-collect/error-collect.component.ts | 36 +++++++--------- packages/abc/exception/exception.component.ts | 22 +++++----- .../footer-toolbar.component.ts | 29 +++++-------- .../full-content-toggle.directive.ts | 4 +- .../full-content/full-content.component.ts | 42 +++++++------------ 13 files changed, 129 insertions(+), 178 deletions(-) diff --git a/packages/abc/auto-focus/auto-focus.directive.ts b/packages/abc/auto-focus/auto-focus.directive.ts index 86fd5239e..df4fa8009 100644 --- a/packages/abc/auto-focus/auto-focus.directive.ts +++ b/packages/abc/auto-focus/auto-focus.directive.ts @@ -18,7 +18,7 @@ import { timer } from 'rxjs'; standalone: true }) export class AutoFocusDirective implements AfterViewInit { - private readonly el = inject>(ElementRef).nativeElement; + private readonly el: HTMLElement = inject(ElementRef).nativeElement; private readonly platform = inject(Platform); private readonly d$ = inject(DestroyRef); diff --git a/packages/abc/avatar-list/avatar-list.component.ts b/packages/abc/avatar-list/avatar-list.component.ts index 3ec5fe472..c0e0efd70 100644 --- a/packages/abc/avatar-list/avatar-list.component.ts +++ b/packages/abc/avatar-list/avatar-list.component.ts @@ -8,13 +8,13 @@ import { ContentChildren, Input, OnChanges, - Optional, QueryList, - ViewEncapsulation + ViewEncapsulation, + inject, + numberAttribute } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; -import { InputNumber, NumberInput } from '@delon/util/decorator'; import { NzAvatarComponent } from 'ng-zorro-antd/avatar'; import type { NgStyleInterface, NzSizeLDSType } from 'ng-zorro-antd/core/types'; import { NzTooltipDirective } from 'ng-zorro-antd/tooltip'; @@ -36,16 +36,17 @@ import { AvatarListItemComponent } from './avatar-list-item.component'; imports: [NgStyle, NgClass, NzAvatarComponent, NzTooltipDirective] }) export class AvatarListComponent implements AfterViewInit, OnChanges { - static ngAcceptInputType_maxLength: NumberInput; + private readonly cdr = inject(ChangeDetectorRef); + private readonly directionality = inject(Directionality, { optional: true }); + private dir$ = this.directionality?.change?.pipe(takeUntilDestroyed()); private inited = false; @ContentChildren(AvatarListItemComponent, { descendants: false }) - private _items!: QueryList; - private dir$ = this.directionality.change?.pipe(takeUntilDestroyed()); + private readonly _items!: QueryList; items: AvatarListItemComponent[] = []; exceedCount = 0; - dir: Direction = 'ltr'; + dir?: Direction = 'ltr'; cls = ''; avatarSize: NzSizeLDSType = 'default'; @@ -63,14 +64,9 @@ export class AvatarListComponent implements AfterViewInit, OnChanges { break; } } - @Input() @InputNumber() maxLength = 0; + @Input({ transform: numberAttribute }) maxLength = 0; @Input() excessItemsStyle: NgStyleInterface | null = null; - constructor( - private cdr: ChangeDetectorRef, - @Optional() private directionality: Directionality - ) {} - private gen(): void { const { _items } = this; const maxLength = this.maxLength > 0 ? this.maxLength : _items.length; @@ -82,8 +78,8 @@ export class AvatarListComponent implements AfterViewInit, OnChanges { } ngAfterViewInit(): void { - this.dir = this.directionality.value; - this.dir$.subscribe((direction: Direction) => { + this.dir = this.directionality?.value; + this.dir$?.subscribe((direction: Direction) => { this.dir = direction; this.cdr.detectChanges(); }); diff --git a/packages/abc/cell/cell-host.directive.ts b/packages/abc/cell/cell-host.directive.ts index 3b4d140c9..226e0dac3 100644 --- a/packages/abc/cell/cell-host.directive.ts +++ b/packages/abc/cell/cell-host.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Input, OnInit, Type, ViewContainerRef } from '@angular/core'; +import { Directive, Input, OnInit, Type, ViewContainerRef, inject } from '@angular/core'; import { warn } from '@delon/util/other'; @@ -10,12 +10,10 @@ import { CellWidgetData } from './cell.types'; standalone: true }) export class CellHostDirective implements OnInit { - @Input() data!: CellWidgetData; + private readonly srv = inject(CellService); + private readonly viewContainerRef = inject(ViewContainerRef); - constructor( - private srv: CellService, - private viewContainerRef: ViewContainerRef - ) {} + @Input() data!: CellWidgetData; ngOnInit(): void { const widget = this.data.options!.widget!; diff --git a/packages/abc/cell/cell.component.ts b/packages/abc/cell/cell.component.ts index 2c56e8112..1e9cab8f4 100644 --- a/packages/abc/cell/cell.component.ts +++ b/packages/abc/cell/cell.component.ts @@ -5,14 +5,15 @@ import { Component, ElementRef, EventEmitter, - Inject, Input, OnChanges, OnDestroy, Output, Renderer2, SimpleChange, - ViewEncapsulation + ViewEncapsulation, + booleanAttribute, + inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import type { SafeValue } from '@angular/platform-browser'; @@ -20,7 +21,6 @@ import { Router } from '@angular/router'; import { Subscription } from 'rxjs'; import { updateHostClass } from '@delon/util/browser'; -import { BooleanInput, InputBoolean } from '@delon/util/decorator'; import { WINDOW } from '@delon/util/token'; import { NzBadgeComponent } from 'ng-zorro-antd/badge'; import { NzCheckboxComponent } from 'ng-zorro-antd/checkbox'; @@ -126,8 +126,13 @@ import type { CellDefaultText, CellOptions, CellTextResult, CellValue, CellWidge ] }) export class CellComponent implements OnChanges, OnDestroy { - static ngAcceptInputType_loading: BooleanInput; - static ngAcceptInputType_disabled: BooleanInput; + private readonly srv = inject(CellService); + private readonly router = inject(Router); + private readonly cdr = inject(ChangeDetectorRef); + private readonly renderer = inject(Renderer2); + private readonly imgSrv = inject(NzImageService); + private readonly win = inject(WINDOW); + private readonly el: HTMLElement = inject(ElementRef).nativeElement; private destroy$?: Subscription; @@ -139,8 +144,8 @@ export class CellComponent implements OnChanges, OnDestroy { @Input() value?: CellValue; @Output() readonly valueChange = new EventEmitter(); @Input() options?: CellOptions; - @Input() @InputBoolean() loading = false; - @Input() @InputBoolean() disabled = false; + @Input({ transform: booleanAttribute }) loading = false; + @Input({ transform: booleanAttribute }) disabled = false; get safeOpt(): CellOptions { return this.res?.options ?? {}; @@ -157,17 +162,6 @@ export class CellComponent implements OnChanges, OnDestroy { }; } - constructor( - private srv: CellService, - private router: Router, - private cdr: ChangeDetectorRef, - private el: ElementRef, - private renderer: Renderer2, - private imgSrv: NzImageService, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - @Inject(WINDOW) private win: any - ) {} - private updateValue(): void { this.destroy$?.unsubscribe(); this.destroy$ = this.srv.get(this.value, this.options).subscribe(res => { @@ -183,7 +177,7 @@ export class CellComponent implements OnChanges, OnDestroy { private setClass(): void { const { el, renderer } = this; const { renderType, size, type } = this.safeOpt; - updateHostClass(el.nativeElement, renderer, { + updateHostClass(el, renderer, { [`cell`]: true, [`cell__${renderType}`]: renderType != null, [`cell__${size}`]: size != null, @@ -191,7 +185,7 @@ export class CellComponent implements OnChanges, OnDestroy { [`cell__has-default`]: this.showDefault, [`cell__disabled`]: this.disabled }); - el.nativeElement.setAttribute('data-type', `${type}`); + el.setAttribute('data-type', `${type}`); } ngOnChanges(changes: { [p in keyof CellComponent]?: SimpleChange }): void { @@ -219,7 +213,7 @@ export class CellComponent implements OnChanges, OnDestroy { if (url == null) return; if (/https?:\/\//g.test(url)) { - (this.win as Window).open(url, link?.target); + this.win.open(url, link?.target); } else { this.router.navigateByUrl(url); } diff --git a/packages/abc/cell/cell.service.ts b/packages/abc/cell/cell.service.ts index aa3d534e2..2210a5059 100644 --- a/packages/abc/cell/cell.service.ts +++ b/packages/abc/cell/cell.service.ts @@ -1,4 +1,4 @@ -import { Injectable, Type } from '@angular/core'; +import { Injectable, Type, inject } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { map, Observable, of } from 'rxjs'; @@ -22,6 +22,9 @@ import type { @Injectable({ providedIn: 'root' }) export class CellService { + private readonly nzI18n = inject(NzI18nService); + private readonly currency = inject(CurrencyService); + private readonly dom = inject(DomSanitizer); private globalOptions!: AlainCellConfig; private widgets: { [key: string]: CellWidget } = { date: { @@ -63,12 +66,7 @@ export class CellService { } }; - constructor( - configSrv: AlainConfigService, - private nzI18n: NzI18nService, - private currency: CurrencyService, - private dom: DomSanitizer - ) { + constructor(configSrv: AlainConfigService) { this.globalOptions = configSrv.merge('cell', { date: { format: 'yyyy-MM-dd HH:mm:ss' }, img: { size: 32 }, diff --git a/packages/abc/date-picker/range.directive.ts b/packages/abc/date-picker/range.directive.ts index b9579e788..594b4fc88 100644 --- a/packages/abc/date-picker/range.directive.ts +++ b/packages/abc/date-picker/range.directive.ts @@ -3,13 +3,12 @@ import { ComponentRef, Directive, EventEmitter, - Host, Input, OnDestroy, - Optional, Output, TemplateRef, - ViewContainerRef + ViewContainerRef, + inject } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @@ -30,6 +29,10 @@ import { RangePickerShortcutTplComponent } from './range-shortcut.component'; export class RangePickerDirective implements OnDestroy, AfterViewInit { static ngAcceptInputType_shortcut: AlainDateRangePickerShortcut | string | null; + private readonly dom = inject(DomSanitizer); + private readonly vcr = inject(ViewContainerRef); + private readonly nativeComp = inject(NzRangePickerComponent, { host: true, optional: true }); + private defaultShortcuts: AlainDateRangePickerShortcut; private _shortcut: AlainDateRangePickerShortcut | null = null; private shortcutFactory: ComponentRef | null = null; @@ -60,22 +63,17 @@ export class RangePickerDirective implements OnDestroy, AfterViewInit { @Output() readonly ngModelEndChange = new EventEmitter(); private get dp(): NzDatePickerComponent { - return this.nativeComp.datePicker; + return this.nativeComp!.datePicker; } private get srv(): DatePickerService { return this.dp.datePickerService; } - constructor( - private dom: DomSanitizer, - configSrv: AlainConfigService, - @Host() @Optional() private nativeComp: NzRangePickerComponent, - private vcr: ViewContainerRef - ) { + constructor(configSrv: AlainConfigService) { if (typeof ngDevMode === 'undefined' || ngDevMode) { assert( - !!nativeComp, + !!this.nativeComp, `It should be attached to nz-range-picker component, for example: ''` ); } @@ -175,7 +173,7 @@ export class RangePickerDirective implements OnDestroy, AfterViewInit { }; extraFooter = instance.tpl; } - this.nativeComp.datePicker.extraFooter = extraFooter; + this.nativeComp!.datePicker.extraFooter = extraFooter; Promise.resolve().then(() => this.cd()); } diff --git a/packages/abc/down-file/down-file.directive.ts b/packages/abc/down-file/down-file.directive.ts index cbeb2ddf1..e62d66999 100644 --- a/packages/abc/down-file/down-file.directive.ts +++ b/packages/abc/down-file/down-file.directive.ts @@ -1,5 +1,5 @@ import { HttpResponse } from '@angular/common/http'; -import { Directive, ElementRef, EventEmitter, Input, Output } from '@angular/core'; +import { Directive, ElementRef, EventEmitter, Input, Output, inject } from '@angular/core'; import { finalize } from 'rxjs'; import { saveAs } from 'file-saver'; @@ -7,6 +7,11 @@ import { saveAs } from 'file-saver'; import { _HttpClient } from '@delon/theme'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; +let isFileSaverSupported = false; +try { + isFileSaverSupported = !!new Blob(); +} catch {} + @Directive({ selector: '[down-file]', exportAs: 'downFile', @@ -16,7 +21,8 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types'; standalone: true }) export class DownFileDirective { - private isFileSaverSupported = true; + private readonly el: HTMLButtonElement = inject(ElementRef).nativeElement; + private readonly _http = inject(_HttpClient); @Input('http-data') httpData: NzSafeAny; @Input('http-body') httpBody: NzSafeAny; @Input('http-method') httpMethod: string = 'get'; @@ -40,28 +46,20 @@ export class DownFileDirective { return arr.reduce((_o, item) => item, {}); } - constructor( - private el: ElementRef, - private _http: _HttpClient - ) { - let isFileSaverSupported = false; - try { - isFileSaverSupported = !!new Blob(); - } catch {} - this.isFileSaverSupported = isFileSaverSupported; + constructor() { if (!isFileSaverSupported) { - el.nativeElement.classList.add(`down-file__not-support`); + this.el.classList.add(`down-file__not-support`); } } private setDisabled(status: boolean): void { - const el = this.el.nativeElement; + const el = this.el; el.disabled = status; el.classList[status ? 'add' : 'remove'](`down-file__disabled`); } async _click(ev: MouseEvent): Promise { - if (!this.isFileSaverSupported || (typeof this.pre === 'function' && !(await this.pre(ev)))) { + if (!isFileSaverSupported || (typeof this.pre === 'function' && !(await this.pre(ev)))) { ev.stopPropagation(); ev.preventDefault(); return; diff --git a/packages/abc/ellipsis/ellipsis.component.ts b/packages/abc/ellipsis/ellipsis.component.ts index b10c2f178..a2afa17bc 100644 --- a/packages/abc/ellipsis/ellipsis.component.ts +++ b/packages/abc/ellipsis/ellipsis.component.ts @@ -6,17 +6,18 @@ import { ChangeDetectorRef, Component, ElementRef, - Inject, Input, NgZone, OnChanges, ViewChild, - ViewEncapsulation + ViewEncapsulation, + booleanAttribute, + inject } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { take } from 'rxjs'; -import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator'; +import { toNumber } from '@delon/util/decorator'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NzTooltipDirective } from 'ng-zorro-antd/tooltip'; @@ -31,11 +32,11 @@ import { NzTooltipDirective } from 'ng-zorro-antd/tooltip'; imports: [CdkObserveContent, NzTooltipDirective, NgTemplateOutlet, NgClass, NgStyle] }) export class EllipsisComponent implements AfterViewInit, OnChanges { - static ngAcceptInputType_tooltip: BooleanInput; - static ngAcceptInputType_length: NumberInput; - static ngAcceptInputType_lines: NumberInput; - static ngAcceptInputType_fullWidthRecognition: BooleanInput; - + private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly ngZone = inject(NgZone); + private readonly dom = inject(DomSanitizer); + private readonly doc = inject(DOCUMENT); + private readonly cdr = inject(ChangeDetectorRef); private isSupportLineClamp = this.doc.body.style['webkitLineClamp'] !== undefined; @ViewChild('orgEl', { static: false }) private orgEl!: ElementRef; @ViewChild('shadowOrgEl', { static: false }) private shadowOrgEl!: ElementRef; @@ -47,10 +48,10 @@ export class EllipsisComponent implements AfterViewInit, OnChanges { text = ''; targetCount = 0; - @Input() @InputBoolean() tooltip = false; - @Input() @InputNumber(null) length?: number; - @Input() @InputNumber(null) lines?: number; - @Input() @InputBoolean() fullWidthRecognition = false; + @Input({ transform: booleanAttribute }) tooltip = false; + @Input({ transform: (v: NzSafeAny) => toNumber(v, null) }) length?: number; + @Input({ transform: (v: NzSafeAny) => toNumber(v, null) }) lines?: number; + @Input({ transform: booleanAttribute }) fullWidthRecognition = false; @Input() tail = '...'; get linsWord(): string { @@ -65,14 +66,6 @@ export class EllipsisComponent implements AfterViewInit, OnChanges { return this.doc.defaultView || window; } - constructor( - private el: ElementRef, - private ngZone: NgZone, - private dom: DomSanitizer, - @Inject(DOCUMENT) private doc: NzSafeAny, - private cdr: ChangeDetectorRef - ) {} - private getStrFullLength(str: string): number { return str.split('').reduce((pre, cur) => { const charCode = cur.charCodeAt(0); @@ -181,7 +174,8 @@ export class EllipsisComponent implements AfterViewInit, OnChanges { const lineText = orgNode.innerText || orgNode.textContent!; const lineHeight = parseInt(this.win.getComputedStyle(this.getEl('.ellipsis')).lineHeight!, 10); const targetHeight = lines! * lineHeight; - this.getEl('.ellipsis__handle').style.height = `${targetHeight}px`; + const handleEl = this.getEl('.ellipsis__handle'); + handleEl!.style.height = `${targetHeight}px`; if (orgNode.offsetHeight <= targetHeight) { this.text = lineText; @@ -199,8 +193,8 @@ export class EllipsisComponent implements AfterViewInit, OnChanges { } } - private getEl(cls: string): HTMLElement { - return this.el.nativeElement.querySelector(cls); + private getEl(cls: string): HTMLElement | null { + return this.el.querySelector(cls); } private executeOnStable(fn: () => void): void { diff --git a/packages/abc/error-collect/error-collect.component.ts b/packages/abc/error-collect/error-collect.component.ts index 649903bdc..903cc9bf9 100644 --- a/packages/abc/error-collect/error-collect.component.ts +++ b/packages/abc/error-collect/error-collect.component.ts @@ -7,19 +7,16 @@ import { Component, DestroyRef, ElementRef, - Inject, Input, OnInit, - Optional, ViewEncapsulation, - inject + inject, + numberAttribute } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { interval } from 'rxjs'; import { AlainConfigService } from '@delon/util/config'; -import { InputNumber } from '@delon/util/decorator'; -import type { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NzIconDirective } from 'ng-zorro-antd/icon'; @Component({ @@ -42,24 +39,23 @@ import { NzIconDirective } from 'ng-zorro-antd/icon'; imports: [NzIconDirective] }) export class ErrorCollectComponent implements OnInit { + private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly cdr = inject(ChangeDetectorRef); + private readonly doc = inject(DOCUMENT); + private readonly directionality = inject(Directionality, { optional: true }); + private readonly platform = inject(Platform); + private readonly destroy$ = inject(DestroyRef); + private formEl: HTMLFormElement | null = null; - private destroy$ = inject(DestroyRef); _hiden = true; count = 0; - dir: Direction = 'ltr'; + dir?: Direction = 'ltr'; - @Input() @InputNumber() freq!: number; - @Input() @InputNumber() offsetTop!: number; + @Input({ transform: numberAttribute }) freq!: number; + @Input({ transform: numberAttribute }) offsetTop!: number; - constructor( - private el: ElementRef, - private cdr: ChangeDetectorRef, - @Inject(DOCUMENT) private doc: NzSafeAny, - configSrv: AlainConfigService, - @Optional() private directionality: Directionality, - private platform: Platform - ) { + constructor(configSrv: AlainConfigService) { configSrv.attach(this, 'errorCollect', { freq: 500, offsetTop: 65 + 64 + 8 * 2 }); } @@ -87,8 +83,8 @@ export class ErrorCollectComponent implements OnInit { } private install(): void { - this.dir = this.directionality.value; - this.directionality.change?.pipe(takeUntilDestroyed(this.destroy$)).subscribe((direction: Direction) => { + this.dir = this.directionality?.value; + this.directionality?.change?.pipe(takeUntilDestroyed(this.destroy$)).subscribe((direction: Direction) => { this.dir = direction; this.cdr.detectChanges(); }); @@ -113,7 +109,7 @@ export class ErrorCollectComponent implements OnInit { ngOnInit(): void { if (!this.platform.isBrowser) return; - this.formEl = this.findParent(this.el.nativeElement, 'form'); + this.formEl = this.findParent(this.el, 'form'); if (this.formEl === null) throw new Error('No found form element'); this.install(); } diff --git a/packages/abc/exception/exception.component.ts b/packages/abc/exception/exception.component.ts index 13d47e431..a7498e89c 100644 --- a/packages/abc/exception/exception.component.ts +++ b/packages/abc/exception/exception.component.ts @@ -8,7 +8,6 @@ import { ElementRef, Input, OnInit, - Optional, ViewChild, ViewEncapsulation, inject @@ -42,13 +41,18 @@ export type ExceptionType = 403 | 404 | 500; export class ExceptionComponent implements OnInit { static ngAcceptInputType_type: ExceptionType | string; - private destroy$ = inject(DestroyRef); + private readonly i18n = inject(DelonLocaleService); + private readonly dom = inject(DomSanitizer); + private readonly directionality = inject(Directionality, { optional: true }); + private readonly cdr = inject(ChangeDetectorRef); + private readonly destroy$ = inject(DestroyRef); + @ViewChild('conTpl', { static: true }) private conTpl!: ElementRef; _type!: ExceptionType; locale: LocaleData = {}; hasCon = false; - dir: Direction = 'ltr'; + dir?: Direction = 'ltr'; _img: SafeUrl = ''; _title: SafeHtml = ''; @@ -92,13 +96,7 @@ export class ExceptionComponent implements OnInit { this.cdr.detectChanges(); } - constructor( - private i18n: DelonLocaleService, - private dom: DomSanitizer, - configSrv: AlainConfigService, - @Optional() private directionality: Directionality, - private cdr: ChangeDetectorRef - ) { + constructor(configSrv: AlainConfigService) { configSrv.attach(this, 'exception', { typeDict: { 403: { @@ -118,8 +116,8 @@ export class ExceptionComponent implements OnInit { } ngOnInit(): void { - this.dir = this.directionality.value; - this.directionality.change?.pipe(takeUntilDestroyed(this.destroy$)).subscribe((direction: Direction) => { + this.dir = this.directionality?.value; + this.directionality?.change?.pipe(takeUntilDestroyed(this.destroy$)).subscribe((direction: Direction) => { this.dir = direction; this.cdr.detectChanges(); }); diff --git a/packages/abc/footer-toolbar/footer-toolbar.component.ts b/packages/abc/footer-toolbar/footer-toolbar.component.ts index 8e93f0ae4..93026c3e0 100644 --- a/packages/abc/footer-toolbar/footer-toolbar.component.ts +++ b/packages/abc/footer-toolbar/footer-toolbar.component.ts @@ -3,19 +3,18 @@ import { ChangeDetectionStrategy, Component, ElementRef, - Inject, Input, OnDestroy, OnInit, Renderer2, TemplateRef, - ViewEncapsulation + ViewEncapsulation, + booleanAttribute, + inject } from '@angular/core'; import { ErrorCollectComponent } from '@delon/abc/error-collect'; -import { BooleanInput, InputBoolean } from '@delon/util/decorator'; import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet'; -import type { NzSafeAny } from 'ng-zorro-antd/core/types'; const CLSBODY = 'footer-toolbar__body'; @@ -30,27 +29,19 @@ const CLSBODY = 'footer-toolbar__body'; imports: [NzStringTemplateOutletDirective, ErrorCollectComponent] }) export class FooterToolbarComponent implements OnInit, OnDestroy { - static ngAcceptInputType_errorCollect: BooleanInput; + private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly renderer = inject(Renderer2); + private readonly bodyCls = inject(DOCUMENT).querySelector('body')?.classList; - @Input() @InputBoolean() errorCollect = false; + @Input({ transform: booleanAttribute }) errorCollect = false; @Input() extra?: string | TemplateRef; - constructor( - private el: ElementRef, - private renderer: Renderer2, - @Inject(DOCUMENT) private doc: NzSafeAny - ) {} - - private get bodyCls(): DOMTokenList { - return (this.doc.querySelector('body') as HTMLElement).classList; - } - ngOnInit(): void { - this.renderer.addClass(this.el.nativeElement, 'footer-toolbar'); - this.bodyCls.add(CLSBODY); + this.renderer.addClass(this.el, 'footer-toolbar'); + this.bodyCls?.add(CLSBODY); } ngOnDestroy(): void { - this.bodyCls.remove(CLSBODY); + this.bodyCls?.remove(CLSBODY); } } diff --git a/packages/abc/full-content/full-content-toggle.directive.ts b/packages/abc/full-content/full-content-toggle.directive.ts index 79a4639b7..b4f5d95ff 100644 --- a/packages/abc/full-content/full-content-toggle.directive.ts +++ b/packages/abc/full-content/full-content-toggle.directive.ts @@ -1,4 +1,4 @@ -import { Directive } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { FullContentComponent } from './full-content.component'; @@ -11,7 +11,7 @@ import { FullContentComponent } from './full-content.component'; standalone: true }) export class FullContentToggleDirective { - constructor(private parent: FullContentComponent) {} + private readonly parent = inject(FullContentComponent); _click(): void { this.parent.toggle(); diff --git a/packages/abc/full-content/full-content.component.ts b/packages/abc/full-content/full-content.component.ts index b5b41359c..83a0afb4a 100644 --- a/packages/abc/full-content/full-content.component.ts +++ b/packages/abc/full-content/full-content.component.ts @@ -7,22 +7,20 @@ import { DestroyRef, ElementRef, EventEmitter, - Inject, Input, OnChanges, OnDestroy, OnInit, Output, ViewEncapsulation, - inject + booleanAttribute, + inject, + numberAttribute } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { ActivationEnd, ActivationStart, Event, Router } from '@angular/router'; import { fromEvent, debounceTime, filter } from 'rxjs'; -import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator'; -import type { NzSafeAny } from 'ng-zorro-antd/core/types'; - import { FullContentService } from './full-content.service'; const wrapCls = `full-content__body`; @@ -43,30 +41,24 @@ const hideTitleCls = `full-content__hidden-title`; standalone: true }) export class FullContentComponent implements AfterViewInit, OnInit, OnChanges, OnDestroy { - static ngAcceptInputType_fullscreen: BooleanInput; - static ngAcceptInputType_hideTitle: BooleanInput; - static ngAcceptInputType_padding: NumberInput; - - private bodyEl!: HTMLElement; + private readonly destroy$ = inject(DestroyRef); + private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly cdr = inject(ChangeDetectorRef); + private readonly srv = inject(FullContentService); + private readonly router = inject(Router); + private readonly doc = inject(DOCUMENT); + + private bodyEl = this.doc.querySelector('body')!; private inited = false; private id = `_full-content-${Math.random().toString(36).substring(2)}`; - private destroy$ = inject(DestroyRef); _height = 0; - @Input() @InputBoolean() fullscreen?: boolean; - @Input() @InputBoolean() hideTitle = true; - @Input() @InputNumber() padding = 24; + @Input({ transform: booleanAttribute }) fullscreen?: boolean; + @Input({ transform: booleanAttribute }) hideTitle = true; + @Input({ transform: numberAttribute }) padding = 24; @Output() readonly fullscreenChange = new EventEmitter(); - constructor( - private el: ElementRef, - private cdr: ChangeDetectorRef, - private srv: FullContentService, - private router: Router, - @Inject(DOCUMENT) private doc: NzSafeAny - ) {} - private updateCls(): void { const clss = this.bodyEl.classList; if (this.fullscreen) { @@ -89,8 +81,7 @@ export class FullContentComponent implements AfterViewInit, OnInit, OnChanges, O } private updateHeight(): void { - this._height = - this.bodyEl.getBoundingClientRect().height - this.el.nativeElement.getBoundingClientRect().top - this.padding; + this._height = this.bodyEl.getBoundingClientRect().height - this.el.getBoundingClientRect().top - this.padding; this.cdr.detectChanges(); } @@ -100,9 +91,8 @@ export class FullContentComponent implements AfterViewInit, OnInit, OnChanges, O ngOnInit(): void { this.inited = true; - this.bodyEl = this.doc.querySelector('body'); this.bodyEl.classList.add(wrapCls); - this.el.nativeElement.id = this.id; + this.el.id = this.id; this.updateCls();