在单击离子4中的“硬件回退”按钮上关闭离子数据报警器

Question

我在应用程序中使用ionic-datepicker (离子型v-4)，下面是template代码：

<ion-datetime  formControlName="meeting_date" display-format="MMM DD, YYYY"></ion-datetime>

datepicker(i，e ion-datetime)在单击外部的cancel/done按钮或后将关闭。，但它不会关闭单击硬件返回按钮。

在我使用datepicker的页面中，我尝试这样做：

ionViewWillLeave(){
        let backDrop: any = document.getElementsByTagName('ion-picker-cmp');
        if(backDrop.length > 0){
            for(let i = 0; i< backDrop.length; i++){
                backDrop[i].style.display = 'none';
            }
        }
      }

但这对我没用，我跟踪了这个解决方案

Answer 1

首先，您应该知道它是否有重点，所以：

<ion-datetime #dateTime (ionFocus)="onDateFocused()" formControlName="meeting_date" display-format="MMM DD, YYYY"></ion-datetime>

在构成部分：

onDateFocused() {
  this.focused = true; // make it false in on blur
}

然后注册到硬件回退按钮：

this.platform.backButton.subscribe(() => {
  // this does work
});

注意:没有用于close api 方法的ion-datetime和open。所以有一些技巧提到了这里

@ViewChild("dateTime", {static: false}) dateTime : DateTime;

ngOnInit() {
  this.platform.backButton.subscribe(() => {
    this.dateTime._picker.dismiss();
  })
}

Answer 2

回答

默认情况下，这已经作为Ionic 4代码的一部分来处理。

但是，要获得此功能，您需要做的是将backdropDismiss设置为true。

理论

离子型注册自定义事件ionBackButton，用于处理硬件后退按钮按下：

• https://github.com/ionic-team/ionic/blob/master/core/src/utils/hardware-back-button.ts#L20

管理Ionic中所有覆盖的覆盖代码为此ionBackButton事件注册了一个事件处理程序，该事件取消了最顶层的覆盖：

• https://github.com/ionic-team/ionic/blob/master/core/src/utils/overlays.ts#L66

但是，只有当backdropDismiss也设置为true时，它才会这样做：

if (lastOverlay && lastOverlay.backdropDismiss) {

Answer 3

这对我来说很管用：

    constructor(
    public pickerCtrl: PickerController,

...and

ionViewWillLeave(){
this.pickerCtrl.dismiss();

编辑：Recomend使用布尔值来判断是否打开