Angular 14中ngbDatePicker的autoClose与placement属性冲突问题求助

问题复现 #

使用Angular 14搭配@ng-bootstrap/ng-bootstrap@^13.1.1时，给ngbDatepicker设置[placement]="'bottom-right'"后，[autoClose]="'outside'"功能失效；移除placement属性后，autoClose恢复正常。需求是让日历弹窗显示在输入框右侧，同时保留点击外部自动关闭的功能。

解决方案 #

方案1：调整CSS定位（优先推荐） #

默认的placement属性与autoClose在container="body"场景下存在冲突，可通过CSS直接调整弹窗位置，无需依赖placement属性：

1. 移除模板中的[placement]="'bottom-right'"属性，保留[autoClose]="'outside'"
2. 添加以下SCSS样式：

// 给包含日期输入框的.input-group添加自定义类datepicker-right
.input-group.datepicker-right {
  // 定位日历弹窗到右侧
  .ngb-datepicker-popup {
    left: auto !important;
    right: 0 !important;
  }
}

3. 给输入框所在的input-group添加datepicker-right类：

<div class="input-group datepicker-right">
  <input name="datepicker"
         class="form-control"
         ngbDatepicker
         #datepicker="ngbDatepicker"
         [autoClose]="'outside'" 
         [container]="'body'"
         (dateSelect)="onDateSelection($event)"
         [displayMonths]="2"
         [dayTemplate]="t"
         outsideDays="hidden"
         [startDate]="calendar.getToday()"
         style="display: none;">
</div>

说明：之前的CSS方案失效是因为选择器错误，NGBootstrap日历弹窗的实际类是ngb-datepicker-popup，而非直接使用ngb-datepicker标签选择器。

方案2：手动实现外部点击关闭逻辑 #

如果方案1无法满足需求，可通过手动监听全局点击事件来实现autoClose：

1. 模板中关闭默认autoClose，保留placement属性：

<input #dateInput name="datepicker"
       class="form-control"
       ngbDatepicker
       #datepicker="ngbDatepicker"
       [autoClose]="false"
       [placement]="'bottom-right'"
       [container]="'body'"
       (dateSelect)="onDateSelection($event)"
       [displayMonths]="2"
       [dayTemplate]="t"
       outsideDays="hidden"
       [startDate]="calendar.getToday()"
       style="display: none;">

2. 组件TS中添加点击监听：

import { Component, ElementRef, ViewChild, HostListener } from '@angular/core';
import { NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChild('datepicker') datepicker!: NgbDatepicker;
  @ViewChild('dateInput') dateInput!: ElementRef<HTMLInputElement>;

  @HostListener('document:click', ['$event'])
  handleClickOutside(event: MouseEvent) {
    const datePickerEl = this.datepicker?.element.nativeElement;
    const inputEl = this.dateInput.nativeElement;

    // 判断点击区域是否在日历弹窗和输入框之外
    if (datePickerEl && !datePickerEl.contains(event.target as Node) && !inputEl.contains(event.target as Node)) {
      this.datepicker.close();
    }
  }

  // 已有方法：日期选择回调
  onDateSelection(event: any) {
    // 你的业务逻辑
  }
}

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