PrimeNG p-calendar组件平板端软键盘弹出时自动关闭的解决方案问询

方案1：使用原生属性配置（推荐） #

PrimeNG 10及以上版本的p-calendar内置了hideOnWindowResize配置项，默认值为true，会在窗口resize事件触发时自动关闭日历弹窗。你只需将该属性手动设为false即可直接解决问题，完全不影响原有软键盘弹出逻辑：

<p-calendar
  [(ngModel)]="yourDateVar"
  [hideOnWindowResize]="false"
  <!-- 保留其他原有配置项 -->
></p-calendar>

该方案侵入性最低，无需额外逻辑开发，为最优解。 #

方案2：低版本兼容方案 #

如果你使用的PrimeNG子版本未提供上述配置项，可以通过重写组件resize事件逻辑实现需求：

1. 给p-calendar添加模板引用和事件监听

<p-calendar
  #calendarRef
  [(ngModel)]="yourDateVar"
  (onShow)="handleCalendarShow()"
  (onHide)="handleCalendarHide()"
  <!-- 保留其他原有配置项 -->
></p-calendar>

2. 在对应ts文件中添加逻辑代码

import { ViewChild } from '@angular/core';
import { Calendar } from 'primeng/calendar';

export class YourComponent {
  @ViewChild('calendarRef') calendarRef: Calendar;
  private originResizeMethod: Function | null = null;

  handleCalendarShow() {
    // 备份组件原生resize处理方法
    this.originResizeMethod = this.calendarRef.onWindowResize.bind(this.calendarRef);
    // 空实现覆盖原有逻辑，阻止resize时关闭弹窗
    this.calendarRef.onWindowResize = () => {};
  }

  handleCalendarHide() {
    // 恢复原生方法，避免内存泄漏和其他副作用
    if (this.originResizeMethod) {
      this.calendarRef.onWindowResize = this.originResizeMethod as () => void;
      this.originResizeMethod = null;
    }
  }
}

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