javascript - 如何删除 Angular 中的切换事件

Question

我在互联网上搜索了很多，但所有答案都使用 jquery .我是 Angular 和 Typescript 的新手。 This和 this不是很有帮助。我从头开始创建了一个 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

有一个hide方法来隐藏overlay，根据注释，keydown会被多次调用，维护一个标志来跟踪overlay的状态。

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 方法。