如何阻止Primeng嵌套对话框关闭子对话框时父对话框滚动到顶部

针对你遇到的关闭嵌套对话框B后，父对话框A自动滚动到顶部且首个可聚焦元素获焦的问题，可通过以下几种方式解决：

1. 记录并恢复父对话框滚动位置 #

在关闭对话框B前，先记录下对话框A的滚动位置，关闭完成后再手动恢复，同时临时阻止焦点自动跳转：

// 关闭对话框B的方法
closeDialogB() {
    // 定位父对话框A的内容容器，记录当前滚动位置
    const dialogAContent = document.querySelector('.p-dialog-content') as HTMLElement;
    const savedScrollTop = dialogAContent?.scrollTop;

    // 关闭对话框B（可根据实际情况用close或closeAll）
    this.dialogService.close();

    // 异步恢复滚动位置，避免DOM更新冲突
    setTimeout(() => {
        if (savedScrollTop !== undefined && dialogAContent) {
            dialogAContent.scrollTop = savedScrollTop;
        }
        // 临时移除首个可聚焦元素的tabindex，阻止自动获焦
        const firstFocusable = dialogAContent?.querySelector('[tabindex]:not([tabindex="-1"])') as HTMLElement;
        if (firstFocusable) {
            firstFocusable.setAttribute('tabindex', '-1');
            setTimeout(() => firstFocusable.removeAttribute('tabindex'), 100);
        }
    }, 0);
}

2. 覆盖父对话框的焦点陷阱逻辑 #

即使设置了focusTrap: false，PrimeNG底层可能仍存在默认焦点监听，可通过移除相关事件阻止自动聚焦：

import { DynamicDialogRef } from 'primeng/dynamicdialog';

// 在对话框A的组件中
constructor(private dialogRef: DynamicDialogRef) {}

ngOnInit() {
    this.dialogRef.onShow.subscribe(() => {
        const dialogContent = document.querySelector('.p-dialog-content') as HTMLElement;
        // 移除PrimeNG自动绑定的焦点陷阱处理事件
        dialogContent.removeEventListener('focus', this.preventAutoFocus);
    });
}

private preventAutoFocus = (e: FocusEvent) => {
    e.preventDefault();
}

3. 自定义Dialog服务覆盖关闭逻辑 #

通过继承DynamicDialogService，重写关闭方法，在关闭子对话框时跳过滚动和焦点重置：

import { DynamicDialogService } from 'primeng/dynamicdialog';
import { Injectable } from '@angular/core';

@Injectable()
export class CustomDialogService extends DynamicDialogService {
    override close(key?: string): void {
        // 记录当前激活对话框的滚动位置
        const activeDialog = document.querySelector('.p-dialog.p-dialog-active .p-dialog-content') as HTMLElement;
        const savedScrollTop = activeDialog?.scrollTop;
        
        // 执行原关闭逻辑
        super.close(key);

        // 恢复滚动位置
        setTimeout(() => {
            if (savedScrollTop !== undefined && activeDialog) {
                activeDialog.scrollTop = savedScrollTop;
            }
        }, 0);
    }
}

然后在模块中替换默认服务：

@NgModule({
    providers: [
        { provide: DynamicDialogService, useClass: CustomDialogService }
    ]
})
export class AppModule {}

4. 检查DOM与CSS配置 #

确保对话框A的内容容器没有设置可能导致滚动重置的CSS属性（如height: 100vh配合overflow: auto的冲突），同时排查是否有其他自定义指令/组件在对话框关闭时触发了滚动行为。

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