基于ion-datetime的自定义Angular组件未操作时异常问题

我开发了一个支持双向绑定的自定义Angular日期选择器组件，数据从Firestore读取，修改后同步回Firestore。但组件存在异常：只有滚动选择时间后点击确认，功能才正常；如果仅打开弹窗直接点击确认，本该把打开选择器时的当前时间同步到Firestore，但实际返回undefined。

组件HTML代码 #

<ion-item>
  <ion-list>
    <ion-item id="{{'open-date-' + pickerId}}">
      <ion-label>{{label}}</ion-label>
      <ion-note slot="end">{{selectedDate | date: 'HH:mm'}}</ion-note>
    </ion-item>
    <ion-modal trigger="{{'open-date-' + pickerId}}" [cssClass]="'bottom-end'">
      <ng-template>
        <ion-datetime
          presentation="time"
          [(ngModel)]="selectedDate"
          (ionChange)="onDateChange(selectedDate)"
          size="cover"
          [showDefaultButtons]="true"
          cancelText="Annuler"
          doneText="Valider"
          minuteValues="0,15,30,45">
        </ion-datetime>
      </ng-template>
    </ion-modal>
  </ion-list>
</ion-item>

组件TS代码 #

import { Component, OnInit, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-datetime-picker',
  templateUrl: './datetime-picker.component.html',
  styleUrls: ['./datetime-picker.component.scss'],
})
export class DatetimePickerComponent implements OnInit {
  @Input() pickerId?: string;
  @Input() label?: string;
  @Input() selectedDate: Date = new Date();
  @Output() selectedDateChange = new EventEmitter<Date>();

  constructor() { }

  ngOnInit() {}

  onDateChange(newDate: Date): void {
    console.log('onDateChange', newDate);
    this.selectedDate = newDate;
    this.selectedDateChange.emit(this.selectedDate);
  }
}

解决方案 #

问题根源在于：Ionic的ion-datetime在未手动修改值的情况下，点击确认按钮不会触发ionChange事件，且此时绑定的ngModel值可能未被正确传递，导致直接确认时返回undefined。以下是针对性修复方案：

1. 监听弹窗关闭事件，手动处理确认逻辑 #

不再依赖ion-datetime的ionChange，转而监听弹窗的didDismiss事件，主动判断用户操作并同步值：

修改后的HTML代码：

<ion-item>
  <ion-list>
    <ion-item id="{{'open-date-' + pickerId}}">
      <ion-label>{{label}}</ion-label>
      <ion-note slot="end">{{selectedDate | date: 'HH:mm'}}</ion-note>
    </ion-item>
    <ion-modal 
      trigger="{{'open-date-' + pickerId}}" 
      [cssClass]="'bottom-end'"
      (didDismiss)="onModalDismiss($event)">
      <ng-template>
        <ion-datetime
          presentation="time"
          [(ngModel)]="selectedDate"
          size="cover"
          [showDefaultButtons]="true"
          cancelText="Annuler"
          doneText="Valider"
          minuteValues="0,15,30,45">
        </ion-datetime>
      </ng-template>
    </ion-modal>
  </ion-list>
</ion-item>

修改后的TS代码：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { OverlayEventDetail } from '@ionic/core/components';

@Component({
  selector: 'app-datetime-picker',
  templateUrl: './datetime-picker.component.html',
  styleUrls: ['./datetime-picker.component.scss'],
})
export class DatetimePickerComponent implements OnInit {
  @Input() pickerId?: string;
  @Input() label?: string;
  @Input() selectedDate: Date = new Date();
  @Output() selectedDateChange = new EventEmitter<Date>();

  constructor() { }

  ngOnInit() {}

  onModalDismiss(event: OverlayEventDetail<any>): void {
    // 仅在用户点击确认按钮时同步值
    if (event.role === 'confirm') {
      // 确保值为有效日期，避免undefined
      if (!(this.selectedDate instanceof Date) || isNaN(this.selectedDate.getTime())) {
        this.selectedDate = new Date();
      }
      this.selectedDateChange.emit(this.selectedDate);
    }
  }
}

2. 优化输入值的有效性处理 #

使用setter确保传入的selectedDate始终为有效Date对象，避免初始值异常：

private _selectedDate: Date = new Date();

@Input() 
set selectedDate(date: Date | string) {
  if (typeof date === 'string') {
    this._selectedDate = new Date(date);
  } else if (date instanceof Date && !isNaN(date.getTime())) {
    this._selectedDate = date;
  } else {
    this._selectedDate = new Date();
  }
}

get selectedDate(): Date {
  return this._selectedDate;
}

@Output() selectedDateChange = new EventEmitter<Date>();

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