如何在Angular中删除切换事件答案

【问题标题】：How to remove toggle event in Angular如何在Angular中删除切换事件
【发布时间】：2019-12-24 05:21:33
【问题描述】：

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

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

monthpicker.component.html

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

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

我的月份选择器组件是可编辑的，这意味着您也可以通过键盘输入日期。但是在输入日期时，我希望该弹出窗口折叠回来。我在textbox中添加了这行代码：

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

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

PS：我也看过TypeScript Event Handlers。

【问题讨论】：

标签： javascript angular typescript primeng

【解决方案1】：

有一个hide方法可以隐藏overlay，按照cmets，由于keydown会被多次调用，维护一个flag来跟踪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 方法。

【讨论】：

我相信这会奏效。但是在每次击键时调用hide 方法是一件好事吗？恐怕它会通过单元测试。我不知道。我只是问问。
在这种情况下保留一个标志变量，然后检查是否调用隐藏。
是的，Plochie，这行得通。 :-) 我接受这个答案。我希望这将通过所有 linting 和单元测试。如果没有，那么我将重新打开此讨论。 ;-)

【解决方案2】：

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

类似这样的：

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

希望对你有帮助！

【讨论】：

错误：无法分配给引用或变量！
所以，我认为你可以做一些不同的事情。因此，您可以在 ts 文件中使用一个变量，而不是在视图中使用一个变量来显示/隐藏您的月份选择器。因此，在（单击）时切换变量的状态，在（更改）时将其设置为 false！这对你来说可能更容易。如果您想尝试这种方法并需要帮助，请告诉我。然后我可以编辑答案，向您展示如何做到这一点！
是的，我可以试试这个。但是(click)="openMonthpicker.toggle($event)" 是由primeng 本身提供的，您无需在自己的打字稿中做任何事情。无论如何，让我们试试你说的。 :-)
overlay 中已经有 hide 方法，不需要任何变量。
哦，太好了，希望对您有所帮助！

【解决方案3】：

这应该适合你。

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

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

【讨论】：