diff --git a/packages/abc/auto-focus/auto-focus.directive.ts b/packages/abc/auto-focus/auto-focus.directive.ts index d2073b52a..86fd5239e 100644 --- a/packages/abc/auto-focus/auto-focus.directive.ts +++ b/packages/abc/auto-focus/auto-focus.directive.ts @@ -1,43 +1,37 @@ import { Platform } from '@angular/cdk/platform'; -import { AfterViewInit, ChangeDetectorRef, Directive, ElementRef, Input, OnDestroy } from '@angular/core'; - -import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator'; -import type { NzSafeAny } from 'ng-zorro-antd/core/types'; +import { + AfterViewInit, + DestroyRef, + Directive, + ElementRef, + Input, + booleanAttribute, + inject, + numberAttribute +} from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { timer } from 'rxjs'; @Directive({ selector: '[auto-focus], input[autofocus="autofocus"], textarea[autofocus="autofocus"]', exportAs: 'autoFocus', standalone: true }) -export class AutoFocusDirective implements AfterViewInit, OnDestroy { - static ngAcceptInputType_enabled: BooleanInput; - static ngAcceptInputType_delay: NumberInput; - - private _focusoutTimeout: NzSafeAny; - @Input() @InputBoolean() enabled = true; - @Input() @InputNumber() delay = 300; +export class AutoFocusDirective implements AfterViewInit { + private readonly el = inject>(ElementRef).nativeElement; + private readonly platform = inject(Platform); + private readonly d$ = inject(DestroyRef); - constructor( - private el: ElementRef, - private cdr: ChangeDetectorRef, - private platform: Platform - ) {} + @Input({ transform: booleanAttribute }) enabled = true; + @Input({ transform: numberAttribute }) delay = 300; ngAfterViewInit(): void { - const el = this.el.nativeElement; + const el = this.el; if (!this.platform.isBrowser || !(el instanceof HTMLElement) || !this.enabled) { return; } - this._focusoutTimeout = setTimeout(() => { - el.focus({ preventScroll: false }); - this.cdr.markForCheck(); - }, this.delay); - } - - ngOnDestroy(): void { - if (this._focusoutTimeout) { - clearTimeout(this._focusoutTimeout); - this._focusoutTimeout = null; - } + timer(this.delay) + .pipe(takeUntilDestroyed(this.d$)) + .subscribe(() => el.focus({ preventScroll: false })); } }