如何删除 Angular 中的切换事件

Question

我在互联网上搜索了很多，但所有答案都使用 jquery。我是 Angular 和 Typescript 的新手。 This and 帮助不大。我从头开始创建了一个 monthpicker。该机制非常简单明了。当我单击 input 字段时，将打开一个包含所有月份的弹出窗口。我的意思是：

那个弹出窗口实际上是 p-overlay 来自 primeng。这是我的代码。

monthpicker.component.html

<textbox 
  (click)="openMonthpicker.toggle($event)">
</textbox>

<p-overlayPanel class="dropdown" #openMonthpicker>
    HTML CODE FOR DISPLAYING MONTHS
</p-overlayPanel>

我的 monthpicker 组件是可编辑的，这意味着您也可以通过键盘输入日期。但是在输入日期时，我希望弹出窗口折叠起来。我在 textbox:

添加了这行代码

<textbox 
  ...
  (keydown)="openMonthpicker.off($event)">
</textbox>

显然，off 不是函数。我也试过 remove。但我不知道是否有关闭事件的功能。有人可以帮我吗？

PS: 我也看了TypeScript Event Handlers.

Answer 1

您可以使用 (change) 并将其绑定到事件以切换选择器。

像这样：

<textbox 
  ...
  (change)="openMonthpicker = false">
</textbox>

希望对您有所帮助！

Answer 2

有一个hide隐藏覆盖的方法，根据评论，因为keydown会被多次调用，维护一个标志来跟踪覆盖的状态。

Demo

组件

export class AppComponent {

  datePickerOpen = false;

openDatePicker(event, element) {
    element.toggle(event);
    this.datePickerOpen = true;
  }

  closeDatePicker(event, element) {
    if (this.datePickerOpen) {
      element.hide(event);
      this.datePickerOpen = false;
    }
  }
}

模板

<textarea
  (click)="openDatePicker($event, openMonthpicker)"
  (keydown)="closeDatePicker($event, openMonthpicker)">
</textarea>

<p-overlayPanel class="dropdown" #openMonthpicker>
    HTML CODE FOR DISPLAYING MONTHS
</p-overlayPanel>

当有 keydown 事件时，您可以在叠加层引用上调用 hide 方法。

Answer 3

这应该适合你。

<p-overlayPanel class="dropdown" #openMonthpicker>
    HTML CODE FOR DISPLAYING MONTHS
</p-overlayPanel>

在您的代码中，您已将 #openMonthpicker 作为参考。因此，在实施月份时，只需在点击月份时调用 openMonthpicker.hide()。因为 hide 方法可用于将其关闭以及您正在寻找的内容。

如何删除 Angular 中的切换事件

How to remove toggle event in Angular

javascript

typescript

primeng

angular