Angular NgbDatepicker移除(change)方法后，如何读取模型值并传递给父组件

嘿，我刚好碰到过一模一样的困扰！NgbDatepicker确实不支持原生的(change)事件，不过有两个非常靠谱的方法能帮你读取日期值并传递给父组件，我给你一步步讲清楚：

方法一：使用ngModel + ngModelChange #

NgbDatepicker本身支持双向绑定[(ngModel)]，我们可以借助(ngModelChange)事件来监听日期的变化，然后通过@Output把值传给父组件：

子组件（你的appcomponent）模板代码： #

<!-- 绑定ngModel并监听ngModelChange事件 -->
<ngb-datepicker [(ngModel)]="selectedDate" (ngModelChange)="onDateUpdated($event)"></ngb-datepicker>

子组件TS代码： #

import { Component, Output, EventEmitter } from '@angular/core';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root', // 假设这是你的appcomponent选择器
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 存储选中的日期
  selectedDate: NgbDate | null = null;
  // 定义输出事件，用于向父组件传递日期
  @Output() dateSelected = new EventEmitter<NgbDate>();

  onDateUpdated(date: NgbDate | null) {
    // 确保有选中的日期才传递
    if (date) {
      this.dateSelected.emit(date);
      
      // 如果需要转换成原生JS Date对象，也可以在这里处理：
      // const nativeDate = new Date(date.year, date.month - 1, date.day);
      // this.dateSelected.emit(nativeDate);
    }
  }
}

父组件中使用子组件： #

<!-- 监听子组件的dateSelected事件 -->
<app-root (dateSelected)="handleSelectedDate($event)"></app-root>

父组件TS代码： #

handleSelectedDate(date: NgbDate) {
  console.log('从子组件收到的日期：', date);
  // 在这里处理日期逻辑即可
}

方法二：使用响应式表单的FormControl #

如果你的项目用了响应式表单，这种方法会更灵活，通过监听valueChanges来获取日期变化：

子组件TS代码： #

import { Component, Output, EventEmitter, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  // 创建FormControl绑定日期选择器
  dateControl = new FormControl<NgbDate | null>(null);
  @Output() dateSelected = new EventEmitter<NgbDate>();

  ngOnInit() {
    // 监听表单控件的值变化
    this.dateControl.valueChanges.subscribe(date => {
      if (date) {
        this.dateSelected.emit(date);
      }
    });
  }
}

子组件模板代码： #

<!-- 绑定FormControl到日期选择器 -->
<ngb-datepicker [formControl]="dateControl"></ngb-datepicker>

父组件的用法和方法一完全一致，监听dateSelected事件即可。

为什么原生(change)事件无效？ #

NgbDatepicker是Angular封装的组件，它内部处理了日期选择的交互逻辑，并没有触发原生的change事件，所以我们必须用它提供的绑定方式（ngModel或响应式表单）来监听值的变化。

这两种方法都经过实践验证，能稳定地实现需求，你可以根据项目的表单风格选一个合适的试试～

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