在 Angular 11 项目中使用 ng-popover 组件时，在 popover 内部集成日期选择器 (ngbDatepicker) 后，选择日期导致 popover 意外自动关闭的问题是一个常见的困扰。本文将深入探讨此问题，并提供有效的解决方案，确保 popover 在日期选择后保持打开状态。

问题分析

当在 ng-popover 中使用 ngbDatepicker 组件时，由于 ngbDatepicker 默认会将日期选择器的容器定位到 <body> 元素，这可能导致 popover 的 outsideClick 触发器误判点击事件发生在 popover 外部，从而关闭 popover。

解决方案

最常见的解决方案是检查 ngbDatepicker 组件的 [container] 属性是否设置为 'body'。如果是，将其移除或设置为其他值，例如 [container]="'body'"。

具体步骤如下：

1. 检查 ngbDatepicker 组件的代码: 找到使用 ngbDatepicker 组件的 HTML 代码。

2. 移除或修改 [container] 属性: 检查该组件是否使用了 [container]="'body'" 属性。如果使用了，尝试移除该属性，或者将其设置为其他值，例如：

   

   Wechat HTML Publisher

   直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

   下载
   • 如果 popover 本身有明确的容器，可以考虑将 [container] 设置为该容器的引用。
   • 如果不需要特定的容器，直接移除 [container] 属性，让 ngbDatepicker 使用默认行为。

示例代码：

错误示范（导致 popover 自动关闭）：

<ng-template #popContent>
  <ngb-datepicker [container]="'body'" [(ngModel)]="model"></ngb-datepicker>
</ng-template>

<button type="button" class="btn btn-outline-secondary" [popover]="popContent" popoverTitle="选择日期">
  选择日期
</button>

正确示范（移除 [container] 属性）：

<ng-template #popContent>
  <ngb-datepicker [(ngModel)]="model"></ngb-datepicker>
</ng-template>

<button type="button" class="btn btn-outline-secondary" [popover]="popContent" popoverTitle="选择日期">
  选择日期
</button>

注意事项：

• 移除 [container] 属性后，ngbDatepicker 将使用默认的容器定位方式，这可能会影响日期选择器的样式和布局。 请根据实际情况调整样式。
• 如果仍然遇到问题，请检查 popover 的触发器设置 (popover-trigger)。 确保触发器设置与预期行为一致。 常用的触发器包括 'click'，'outsideClick' 和 'focus'。 如果使用了 'outsideClick'，并且日期选择器的行为被误判为外部点击，也会导致 popover 关闭。

总结：

解决 Angular 11 中 ng-popover 集成 ngbDatepicker 自动关闭问题的关键在于控制 ngbDatepicker 的容器定位。 通过移除或修改 [container] 属性，可以避免 outsideClick 触发器的误判，从而确保 popover 在日期选择后保持打开状态。 在修改后，务必测试样式和布局，确保日期选择器正常工作。