如何在 Angular 中刪除切換事件

Question

我在互聯網上搜索了很多，但所有的答案都使用jquery 。 我是 Angular 和 Typescript 的新手。 這和這不是很有幫助。 我從頭開始創建了一個月份選擇器。 該機制非常簡單明了。 當我單擊input字段時，會打開一個包含所有月份的彈出窗口。 我的意思是：

該彈出窗口實際上是來自primeng p-overlay 。 這是我的代碼。

月份選擇器.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 。

Answer 1

有一個hide方法來隱藏覆蓋，根據評論，因為keydown會被多次調用，維護一個標志來跟蹤覆蓋的狀態。

演示

成分

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 2

您可以使用(change)並將其綁定到一個事件來切換選擇器。

像這樣的東西：

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

希望能幫助到你！

Answer 3

這應該對你有用。

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

在您的代碼中，您已將#openMonthpicker作為參考。 因此，在實施月份時，只需在點擊月份時調用openMonthpicker.hide()即可。 因為可以使用隱藏方法將其關閉以及您正在查看的內容。