Ionic 6中如何以编程方式打开和关闭ion-datetime？

问题场景 #

在Ionic 6中，通过ion-datetime-button配合ion-modal实现了隐藏式日期选择器，目前已能通过datetime.confirm(true)实现关闭，但需要通过内部事件触发编程式打开。此前采用隐藏ion-button并模拟点击的方式可行，但需同时保留ion-datetime-button和额外隐藏按钮，流程繁琐。

更简洁的解决方案 #

无需额外添加隐藏按钮，直接通过ViewChild获取ion-datetime-button实例，调用其内置的present()方法即可触发模态框打开：

1. 模板代码

<ion-datetime-button #datetimeTrigger datetime="datetime" hidden></ion-datetime-button>

<ion-modal [keepContentsMounted]="true">
    <ng-template>
        <ion-datetime #datetime
                      id="datetime"
                      presentation="date"
                      (ionChange)="newDatePicked($event)"
                      (ionFocus)="handleDateFocus()"
                      (ionBlur)="handleDateBlur()"
                      [firstDayOfWeek]="1">
        </ion-datetime>
    </ng-template>
</ion-modal>

<!-- 可自定义触发按钮，或通过内部事件调用openDatetime方法 -->
<ion-button (click)="openDatetime()">打开日期选择器</ion-button>

2. 组件代码

import { Component, ViewChild } from '@angular/core';
import { IonDatetimeButton } from '@ionic/angular';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.page.html',
  styleUrls: ['./your-component.page.scss'],
})
export class YourComponentPage {
  @ViewChild('datetimeTrigger') datetimeTrigger: IonDatetimeButton;

  openDatetime() {
    // 直接调用present方法打开关联模态框
    this.datetimeTrigger.present();
  }

  // 保留原有业务方法
  newDatePicked(event: any) { /* 你的日期选择逻辑 */ }
  handleDateFocus() { /* 你的焦点处理逻辑 */ }
  handleDateBlur() { /* 你的失焦处理逻辑 */ }
}

原理说明 #

ion-datetime-button内部封装了触发模态框的逻辑，present()是官方提供的用于打开关联模态框的API，无需模拟DOM点击操作。此前模拟点击ion-datetime-button无效，是因为直接调用元素click()未触发组件内部绑定的事件逻辑，而调用组件实例的present()方法是官方推荐的正确方式。

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