Angular中Bootstrap二次打开模态框无法获取焦点问题求助

• 核心原因：关闭模态框A后立即打开B时，Bootstrap的焦点陷阱逻辑可能因A的DOM清理未完成，导致B的焦点约束未正确绑定。

• 解决方案1：利用Bootstrap模态框的关闭完成事件
  在关闭模态框A的hidden.bs.modal事件触发后，再打开模态框B，确保A完全从DOM中移除，B的初始化不受干扰。
  代码示例：

  // 关闭模态框A并监听关闭完成事件
  this.modalA.hide();
  this.modalA.onHidden.subscribe(() => {
    // 打开模态框B
    this.modalB.show();
    // 手动聚焦B内的第一个可聚焦元素（可选，强化焦点体验）
    document.querySelector('#modalB .btn-primary')?.focus();
  });
  

• 解决方案2：手动初始化B的焦点陷阱
  Bootstrap模态框的焦点陷阱由_enforceFocus方法维护，可在B打开后手动调用该方法修复焦点约束：

  this.modalB.show();
  // 延迟确保DOM渲染完成后调用
  setTimeout(() => {
    if (this.modalB._element) {
      // 调用Bootstrap内部的焦点强制方法
      (this.modalB as any)._enforceFocus();
    }
  }, 100);
  

• 注意事项

  • 避免直接在A的保存按钮点击事件中同步调用B的show()，必须等待A的关闭流程完成。
  • 若使用Angular的ViewChild获取模态框实例，确保在组件初始化完成后再操作。

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