PrimeNG Calendar 需要找到一种方法来覆盖默认的输入键行为

Question

我正在使用 PrimeNG 的日历组件。对于特定场景，我想覆盖默认的 Enter 键行为。目前，当日历打开时，Enter 键会关闭日历。我想在日历关闭之前运行一些逻辑。

我已经检查过，在 Enter 键上，会调用日历的 onClose 事件。

我尝试过的事情：

在日历的按键事件上调用函数。如果按下 Enter 键，则运行我的自定义逻辑。但是，onClose 事件在 keydown 事件之前触发。因此，我的自定义逻辑在日历关闭后运行

可能的解决方案：

如果我能找出导致日期选择器关闭的原因，那么我就可以运行我的自定义逻辑。例如，当用户单击外部或按下 Enter 键时（在我的情况下），日期选择器将关闭。

进一步研究：

我发现了一个 github 问题，用户希望按下 Enter 键时关闭日历叠加层。

https://github.com/primefaces/primeng/issues/9880

在检查他们的更改时，我发现在函数 onInputKeydown(event) 中，当按下 Enter 键时，他们将日历的overlayVisible 字段设置为 false。我相信这就是触发日历 onClose 事件的原因。只是指出这一点，以防有人觉得这有帮助。

StackBlitz：

https://stackblitz.com/edit/primeng-calendar-demo-xbkrhr?file=src%2Fapp%2Fapp.component.ts

在 stackblitz 中，使用输入字段编辑日期，然后按 Enter。在控制台日志窗口中，您会发现首先触发了 onClose 事件。之后，日历的 keydown 事件被触发。我希望 keydown 事件首先发生，这样我就可以在 onClose 事件触发之前执行一些自定义逻辑。

版本：

PrimeNG版本：^17.5.0

角度版本：~15.2.0

Answer 1

如果你想让 keydown 事件在 onClose 事件之前运行，这里有一个使用 RxJS 运算符的解决方案：

1- 实现 AfterViewInIt。

2- 在 HTML 内添加模板引用

#calender

并使用

calender

阅读

@ViewChild

:

    <p-calendar
      #calender
      inputId="basic"
      [(ngModel)]="date"
    ></p-calendar>

  @ViewChild('calender') calender: Calendar;

3- 在

ngAfterViewInIt()

内执行以下操作：

  // add delay to event emitter
  const onClose$ = this.calender.onClose.pipe(delay(500));

  const keyEnter$ = fromEvent(
      this.calender.inputfieldViewChild.nativeElement,
      'keydown'
    ).pipe(filter<KeyboardEvent>((e) => e.key == 'Enter'));

    merge(onClose$, keyEnter$).subscribe((res) => {
     //here you can check if the res is instanceof KeyboardEvent and do your logic
      if(res instanceof KeyboardEvent){// but your logic here}
    });

您可以在这里查看

StackBlitz

： Keydown 事件之后订购 onClose 事件