在 ionic 4 中单击硬件后退按钮时关闭 ionic-datepicker答案

【问题标题】：To close ionic-datepicker on clicking hardware back button in ionic 4在 ionic 4 中单击硬件后退按钮时关闭 ionic-datepicker
【发布时间】：2020-01-12 21:59:57
【问题描述】：

我在应用程序（ionic v-4）中使用ionic-datepicker，下面是template 代码：

<ion-datetime  formControlName="meeting_date" display-format="MMM DD, YYYY"></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';
            }
        }
      }

但这对我不起作用，我关注了这个 solution

【问题讨论】：

您还有其他使用返回按钮的内容吗？我以为我在代码中看到它先关闭所有覆盖，然后再回到历史。
这是the answer that I was thinking of - 覆盖系统为硬件后退按钮事件注册一个处理程序并关闭最上面的覆盖。

标签： angular ionic-framework ionic4

【解决方案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
});

注意：ion-datetime 和 open 没有 close api method。所以这里提到了一些技巧here：

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

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

【讨论】：

在哪个方法中我需要注册硬件后退按钮，表示此代码 ==> this.platform.backButton.subscribe(() => { // 这确实有效 }); 我需要打电话到哪里？
也许在ngOnInit 里面你可以注册活动。查看更新的答案。
所以请描述一下发生了什么。
在活动中做console.log('something')看看它是否有效
你是否导入Platform并将其注入构造函数？

【解决方案2】：

回答

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

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

理论

Ionic 注册了一个自定义事件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) {

【讨论】：

【解决方案3】：

这对我有用：

    constructor(
    public pickerCtrl: PickerController,

...和

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

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

【讨论】：