在 Angular 11 项目中使用 ng-popover 组件时，在 popover 内部集成日期选择器 (ngbDatepicker) 后，选择日期导致 popover 意外自动关闭的问题是一个常见的困扰。本文将深入探讨此问题，并提供有效的解决方案，确保 popover 在日期选择后保持打开状态。
问题分析
当在 ng-popover 中使用 ngbDatepicker 组件时，由于 ngbDatepicker 默认会将日期选择器的容器定位到 <body> 元素，这可能导致 popover 的 outsideClick 触发器误判点击事件发生在 popover 外部，从而关闭 popover。
解决方案
最常见的解决方案是检查 ngbDatepicker 组件的 [container] 属性是否设置为 'body'。如果是，将其移除或设置为其他值，例如 [container]="'body'"。
具体步骤如下：
检查 ngbDatepicker 组件的代码: 找到使用 ngbDatepicker 组件的 HTML 代码。
-
移除或修改 [container] 属性: 检查该组件是否使用了 [container]="'body'" 属性。如果使用了，尝试移除该属性，或者将其设置为其他值，例如：
- 如果 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 在日期选择后保持打开状态。 在修改后，务必测试样式和布局，确保日期选择器正常工作。
