Angular 5中ng-bootstrap日期选择器弹窗模型绑定失效问题

这个问题我之前也碰到过！核心原因是你封装的子组件没有正确实现双向绑定机制——Angular的双向绑定不是自动生效的，得手动通过@Input和@Output来打通父子组件的数据通道。下面给你一套完整的解决方案：

在你的组件类里，需要定义输入属性接收父组件的初始值，同时定义对应的输出事件（命名必须是[输入属性名]Change，这是Angular双向绑定的约定），当日期选择变化时触发这个事件把新值传给父组件。

比如你的组件类CustomDatePickerComponent：

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

@Component({
  selector: 'app-custom-date-picker',
  templateUrl: './custom-date-picker.component.html',
  styleUrls: ['./custom-date-picker.component.css']
})
export class CustomDatePickerComponent {
  // 接收父组件传入的初始日期
  @Input() selectedDate: NgbDateStruct | null = null;
  // 输出日期变化事件，命名必须是selectedDateChange才能支持双向绑定
  @Output() selectedDateChange = new EventEmitter<NgbDateStruct | null>();

  constructor(private parserFormatter: NgbDateParserFormatter) {}

  // 当日期选择变化时，触发输出事件
  onDateChange(date: NgbDateStruct | null) {
    this.selectedDate = date;
    this.selectedDateChange.emit(date);
  }

  // 可选：把NgbDateStruct转成yyyy-mm-dd格式的字符串用于显示
  get dateString(): string {
    return this.selectedDate ? this.parserFormatter.format(this.selectedDate) : '';
  }
}

把模板里的[(ngModel)]拆分成单向绑定[ngModel]和事件绑定(ngModelChange)，这样就能在日期变化时调用我们的onDateChange方法：

<div class="input-group">
  <input 
    class="form-control" 
    placeholder="yyyy-mm-dd" 
    name="dp" 
    [ngModel]="dateString" 
    (ngModelChange)="onDateChange(parserFormatter.parse($event))"
    ngbDatepicker 
    #d="ngbDatepicker"
  >
  <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
      <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
    </svg>
  </button>
</div>

这里用NgbDateParserFormatter自动处理日期字符串和NgbDateStruct的转换，避免手动写格式转换逻辑。

现在你就可以在父组件里用双向绑定来获取选中的日期了：

<!-- 父组件模板 -->
<app-custom-date-picker [(selectedDate)]="parentSelectedDate"></app-custom-date-picker>

<!-- 测试用：显示选中的日期 -->
<p>当前选中日期：{{ parentSelectedDate | json }}</p>

父组件的TS里只需要定义对应的变量即可：

import { Component } from '@angular/core';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  parentSelectedDate: NgbDateStruct | null = null;
}

如果你需要把NgbDateStruct转换成原生Date对象传给父组件，可以修改子组件的onDateChange方法：

onDateChange(date: NgbDateStruct | null) {
  // 把NgbDateStruct转成Date（注意月份是0开始的）
  const dateObj = date ? new Date(date.year, date.month - 1, date.day) : null;
  this.selectedDateChange.emit(dateObj);
}

同时父组件的parentSelectedDate类型改成Date | null就行。

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