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

我已经判断过,在Enter键上,日历的onClose事件被调用.

Things I've tried:

在日历的按键事件上调用函数.如果按了Enter键,则运行我的自定义逻辑.但是,onClose事件在Keydown事件之前激发.因此,我的定制逻辑在日历关闭后运行

Possible Solution:

如果我能找出是什么原因导致DatePicker关闭,那么我就可以运行我的定制逻辑.例如,当用户在外部单击或按Enter键时(在我的例子中),DatePicker关闭.

Further research:

我发现了GitHub的一个问题,用户希望在按Enter键时关闭日历覆盖.

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

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

一百:

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

在Stackblitz中,使用输入字段编辑日期,然后按Enter键.在控制台日志(log)窗口中,您将发现首先触发了onClose事件.在此之后,触发日历的Keydown事件.我希望KeyDown事件首先发生,这样我就可以在触发onClose事件之前执行一些定制逻辑.

Versions:

PrimeNG版本:^17.5.0

Angular 版本:~15.2.0

推荐答案

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

1-实现AfterViewInIt.

2-在HTML中添加模板引用#calender,并使用@ViewChild阅读calender:

    <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: Order onClose event after Keydown event

Typescript相关问答推荐

Typescript问题和缩减器状态不会在单击时添加用途.属性'状态和调度'不存在于userContextType类型上'|null'

实现忽略了JSSOM中的doctor.body.innerHTML集

如何将http上下文附加到angular中翻译模块发送的请求

即使子网是公共的,AWS CDK EventBridge ECS任务也无法分配公共IP地址

在Angular中,如何在文件上传后清除文件上传文本框

TypeScript:在作为参数传递给另一个函数的记录中对函数的参数实现类型约束

迁移到Reaction路由V6时,获取模块Reaction-Router-Dom';没有导出的成员RouteComponentProps错误

在MessageStore对象中实现条件类型时出现TypeScrip错误

在类型脚本中的泛型类上扩展的可选参数

错误TS2403:后续变量声明必须具有相同的类型.变量';CRYPTO';的类型必须是';CRYPATO';,但这里的类型是';CRYPATO';

为什么&;(交集)运算符会删除不相交的属性?

声明文件中的类型继承

将带有样式的Reaction组件导入到Pages文件夹时不起作用

在类型脚本中创建显式不安全的私有类成员访问函数

使用&reaction测试库&如何使用提供程序包装我的所有测试组件

如何创建由一个帐户签名但使用另一个帐户支付的Hedera交易

类型脚本中函数重载中的类型推断问题

如何将对象的字符串文字属性用作同一对象中的键类型

换行TypeScript';s具有泛型类型的推断数据类型

什么';是并类型A|B的点,其中B是A的子类?