Angular指令：窗口resize后getBoundingClientRect返回值异常

核心问题是第一次调用appendToBody后，下拉框元素已被从原始父节点移到body下，后续resize事件触发时，dropdownEl.parentElement获取到的是body而非最初的父容器，导致getBoundingClientRect()拿到的是body的位置信息，自然无法得到正确结果。

修正方案 #

1. 初始化时保存原始父元素的引用，避免每次调用都动态获取（元素被移动后父节点会改变）
2. 可选添加防抖处理，避免resize事件频繁触发导致性能损耗

修正后的代码：

@Directive({
    selector: '[appendDropdownToBody]'
})
export class AppendDropdownToBodyDirective implements AfterViewInit {
    // 保存原始父元素引用
    private originalParentEl!: HTMLElement;
    private resizeTimeout: any;

    constructor(
        private _el: ElementRef,
        private _renderer: Renderer2,
        private _changeDetectorRef: ChangeDetectorRef
    ) {}

    ngAfterViewInit() {
        // 初始化时记录原始父元素
        this.originalParentEl = this._el.nativeElement.parentElement as HTMLElement;
        this.appendToBody();
    }

    @HostListener('window:resize', ['$event'])
    onResize(event: Event) {
        // 防抖处理，减少频繁触发
        clearTimeout(this.resizeTimeout);
        this.resizeTimeout = setTimeout(() => {
            this.appendToBody();
        }, 150);
    }

    private appendToBody() {
        const dropdownEl = this._el.nativeElement as HTMLElement;
        // 使用保存的原始父元素计算位置
        const parentElRect = this.originalParentEl.getBoundingClientRect() as DOMRect;
        
        // 避免重复将元素追加到body
        if (dropdownEl.parentElement !== document.body) {
            this._renderer.appendChild(document.body, dropdownEl);
        }

        this._renderer.setStyle(
            dropdownEl,
            'top',
            parentElRect.bottom + 10 + 'px'
        );
        this._renderer.setStyle(
            dropdownEl,
            'left',
            parentElRect.left + 'px'
        );
        this._renderer.setStyle(
            dropdownEl,
            'width',
            parentElRect.width + 'px'
        );
    }
}

额外说明 #

• 保存原始父元素：确保每次计算位置都基于下拉框最初的触发容器，而非移动后的body
• 防抖处理：resize事件会在窗口调整过程中频繁触发，添加150ms延迟可减少不必要的DOM操作
• 父节点判断：避免重复追加元素到body，防止DOM结构冗余

内容的提问来源于stack exchange，提问作者RAHUL KUNDU