Ionic2中按下返回按钮时如何关闭残留的ion-datetime弹窗？

这个问题在Ionic 2的ion-datetime组件里确实挺常见的——组件的日期选择弹窗不会随着页面跳转自动关闭，导致返回上一页后它还留在界面上。下面给你两种靠谱的解决思路，结合你的代码来实现：

先梳理下你的现有代码 #

HTML部分：

<ion-datetime id="dateofbirth" class="date" displayFormat="DD MMMM YYYY" [max]="maxDate" [min]="minDate">
</ion-datetime>

TS日期逻辑部分（我补了缺失的maxDay定义，避免报错）：

let date: any = new Date(), 
    maxYear = date.getFullYear() - 18, 
    minYear = date.getFullYear() - 65, 
    month = date.getMonth() + 1, 
    minDay: any = date.getDate(), 
    maxDay = date.getDate();
this.minDate = `${minYear}-${month}-${minDay}`; 
this.maxDate = `${maxYear}-${month}-${maxDay}`;

方法一：利用页面生命周期钩子批量关闭弹窗 #

Ionic页面提供了ionViewWillLeave钩子，会在页面即将被离开时触发。我们可以借助ViewController来关闭当前页面关联的所有弹窗：

1. 首先在TS文件中导入ViewController并注入：

import { ViewController } from 'ionic-angular';

constructor(private viewCtrl: ViewController) {}

2. 添加生命周期函数：

ionViewWillLeave() {
  // 关闭当前页面所有打开的弹窗，包括ion-datetime的选择器
  this.viewCtrl.dismiss();
}

这种方法简单粗暴，能一次性处理页面上所有可能的弹窗，适合场景简单的页面。

方法二：精准关闭指定的日期选择器 #

如果你只想针对这个ion-datetime组件操作，可以通过模板引用变量获取组件实例，然后手动关闭它的弹窗：

1. 修改HTML，给组件添加模板引用变量#datePicker：

<ion-datetime #datePicker id="dateofbirth" class="date" displayFormat="DD MMMM YYYY" [max]="maxDate" [min]="minDate">
</ion-datetime>

2. 在TS文件中导入相关依赖并获取组件实例：

import { ViewChild } from '@angular/core';
import { DateTime } from 'ionic-angular';

@ViewChild('datePicker') datePicker: DateTime;

3. 在ionViewWillLeave钩子中检查并关闭弹窗：

ionViewWillLeave() {
  // 确认弹窗存在后再关闭，避免报错
  if (this.datePicker && this.datePicker._overlay) {
    this.datePicker._overlay.dismiss();
  }
}

这种方式更精准，不会影响页面上其他可能的弹窗组件。

两种方法都能解决你遇到的问题，根据你的页面复杂度选就行～

内容的提问来源于stack exchange，提问作者Ani