Angular ngbPopover设置autoclose实现同一时间仅打开1个弹窗方案咨询

解决方案 #

你可以通过手动管理所有popover实例的开关状态实现需求，无需依赖autoClose配置，自然规避和tinymce编辑器的冲突问题，具体实现如下：

步骤1：组件类新增状态变量 #

存储当前处于打开状态的popover实例：

import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';

// 组件类内部
currentOpenPopover: NgbPopover | null = null;

步骤2：修改模板点击逻辑 #

替换原有的直接调用open()的逻辑，传入当前popover实例：

<a 
  triggers="manual" 
  #notesBox="ngbPopover" 
  [ngbPopover]="notesEditor" 
  popoverTitle='My Note' 
  (click)="togglePopover(notesBox)"
>
  添加备注
</a>

步骤3：实现开关控制方法 #

每次打开新popover前先关闭上一个已打开的实例：

togglePopover(targetPopover: NgbPopover) {
  // 点击已打开的popover触发按钮，直接关闭当前popover
  if (this.currentOpenPopover === targetPopover) {
    targetPopover.close();
    this.currentOpenPopover = null;
    return;
  }
  // 关闭上一个打开的popover
  if (this.currentOpenPopover) {
    this.currentOpenPopover.close();
  }
  // 打开当前选中的popover
  targetPopover.open();
  this.currentOpenPopover = targetPopover;
}

可选：保留外部点击关闭能力 #

如果需要支持点击popover以外区域关闭，又不想干扰tinymce的交互，可以添加全局点击监听，过滤tinymce区域的点击事件：

import { HostListener } from '@angular/core';

// 组件类内部
@HostListener('document:click', ['$event'])
handleOuterClick(event: MouseEvent) {
  if (!this.currentOpenPopover) return;
  const clickTarget = event.target as HTMLElement;
  // 过滤三类点击：popover内部、触发按钮、tinymce编辑器区域
  const isInPopover = this.currentOpenPopover._elementRef.nativeElement.contains(clickTarget);
  const isInTinymce = !!clickTarget.closest('.tox');
  const isOnTrigger = !!clickTarget.closest('[ngbPopover]');

  if (!isInPopover && !isInTinymce && !isOnTrigger) {
    this.currentOpenPopover.close();
    this.currentOpenPopover = null;
  }
}

该方案完全绕开了ng-bootstrap自带的autoClose事件逻辑，不会和tinymce的事件冒泡、样式渲染产生冲突，可稳定实现你需要的单popover同时打开的交互逻辑。

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