关闭弹窗后如何恢复页面原有焦点？

要解决弹窗关闭后页面原有焦点丢失的问题，核心思路是在弹窗打开时记录当前页面的聚焦元素，关闭弹窗后将焦点恢复到该元素，具体实现步骤如下：

1. 在组件中添加变量存储原焦点元素 #

在Dialog组件类中声明私有变量，用于保存弹窗打开前的页面聚焦元素：

export class DialogComponent implements OnDestroy{
  isVisible!: boolean;
  // 新增：存储弹窗打开前的焦点元素
  private previousFocusElement: HTMLElement | null = null;

  // 其余原有代码...
}

2. 弹窗显示时记录原焦点 #

在弹窗即将显示（设置isVisible = true）的时机，用document.activeElement获取当前页面的聚焦元素并保存：

constructor(
  private keysService: KeysService,
  private actionService: ActionService,
  private router: Router,
  private renderer2: Renderer2,
  private activatedRoute: ActivatedRoute
){
  // 记录弹窗打开前的焦点元素
  this.previousFocusElement = document.activeElement as HTMLElement;
  this.isVisible = true;
  // 注：你当前constructor中直接调用closeDialog会立即关闭弹窗，若为测试代码可按需保留
  // this.closeDialog();
}

3. 关闭弹窗时恢复焦点 #

在closeDialog方法中，等弹窗DOM完全隐藏后，将焦点恢复到之前记录的元素上：

closeDialog(): void{
  setTimeout(() => {
    this.isVisible = false;
    // 延迟执行确保Angular完成DOM变更检测，弹窗已从DOM移除
    setTimeout(() => {
      if (this.previousFocusElement) {
        this.previousFocusElement.focus();
        // 可选：若元素不在视口内，滚动到该元素
        this.previousFocusElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }
    });
  });
}

4. 组件销毁时兜底恢复焦点 #

为避免组件意外销毁（如路由跳转）导致焦点丢失，在ngOnDestroy中添加兜底逻辑：

ngOnDestroy(): void {
  this.actionSubscription.unsubscribe();
  this._keySubscription.unsubscribe();
  // 兜底：组件销毁时恢复原焦点
  if (this.previousFocusElement) {
    this.previousFocusElement.focus();
  }
}

额外注意事项 #

• 你的代码存在几处笔误：setTimeOut应为setTimeout，closesDlg()应为closeDialog()，isVisible! = boolean;应为isVisible!: boolean;，建议修正。
• 若弹窗通过全局服务调用，可将记录焦点的逻辑放在服务的弹窗显示方法中，确保每次弹窗打开时都能正确捕获当前页面的焦点元素。

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