Angular 11：owl-date-time-calendar未捕获点击致ng-popover自动关闭

针对Angular 11.0.4 + Bootstrap 4.0.0环境下，多个配置了outsideClick和focus触发的ng-popover，嵌套owl-date-time-calendar时点击日期会触发popover自动关闭的问题，提供以下几种可行解决方案：

方案1：自定义外部点击判断逻辑，排除日期选择器元素 #

通过popoverOutsideClickHandler自定义函数，识别点击目标是否属于日期选择器DOM，若是则阻止popover关闭：

1. 在组件类中定义处理函数：

handleOutsideClick(event: MouseEvent): boolean {
  // 检查点击元素是否在owl-date-time-calendar范围内
  const target = event.target as HTMLElement;
  if (target.closest('.owl-date-time-calendar')) {
    event.stopPropagation();
    return false; // 返回false阻止popover关闭
  }
  return true; // 返回true允许正常关闭
}

2. 在模板中绑定该函数到ng-popover：

<ng-popover 
  [popover-trigger]="['outsideClick', 'focus']"
  [popoverOutsideClickHandler]="handleOutsideClick"
>
  <owl-date-time-calendar></owl-date-time-calendar>
</ng-popover>

方案2：调整触发方式并阻止日期选择器焦点冒泡 #

暂时移除focus触发，同时阻止日期选择器相关元素的焦点事件冒泡，避免触发popover关闭逻辑：

<ng-popover 
  [popover-trigger]="'outsideClick'"
>
  <!-- 给日期选择器的输入框添加焦点阻止 -->
  <input type="text" (focus)="$event.stopPropagation()">
  <owl-date-time-calendar></owl-date-time-calendar>
</ng-popover>

方案3：将popover内容追加到body调整DOM层级 #

利用popoverAppendToBody属性，把popover内容挂载到body上，让日期选择器与popover处于同一DOM层级，确保点击事件被识别为内部事件：

<ng-popover 
  [popover-trigger]="['outsideClick', 'focus']"
  [popoverAppendToBody]="true"
>
  <owl-date-time-calendar></owl-date-time-calendar>
</ng-popover>

方案选择建议 #

• 方案1灵活性最高，适合需要保留原有触发逻辑的场景；
• 方案2操作简单，适合对触发方式要求不严格的场景；
• 方案3适用于因DOM层级导致事件冒泡异常的情况。

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