Angular 5中mat-datepicker的预设与重置问题求助

我来帮你搞定Angular 5里Material DatePicker预设和重置日期的问题！结合你提到的容器组件结构，咱们一步步来排查和解决：

你在容器里给自定义的matDatepicker传了[initDate]="newVisitDate"，那子组件得先正确定义这个输入属性，还要把初始值同步到DatePicker的绑定值上。给你个子组件的示例代码：

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';

@Component({
  selector: 'matDatepicker',
  template: `
    <mat-form-field>
      <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" 
             (dateInput)="onDateSelected($event)">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
    <!-- 加个重置按钮，也可以让父组件触发重置 -->
    <button mat-raised-button color="warn" (click)="resetDate()">重置日期</button>
  `
})
export class CustomDatepickerComponent implements OnInit {
  @Input() initDate: Date;
  @Output() newDatePickedEvent = new EventEmitter<Date>();
  
  selectedDate: Date;

  ngOnInit() {
    // 组件初始化时，把父组件传的初始日期赋值给选中值
    if (this.initDate) {
      // 注意要创建新的Date实例，避免引用问题导致变更检测不生效
      this.selectedDate = new Date(this.initDate);
    }
  }

  onDateSelected(event: MatDatepickerInputEvent<Date>) {
    // 把选中的日期同步给父组件
    this.newDatePickedEvent.emit(event.value);
  }

  resetDate() {
    // 这里可以选择重置为空，或者重置为初始日期
    this.selectedDate = null;
    // 如果要重置为初始值，就改成 this.selectedDate = new Date(this.initDate);
    // 别忘了通知父组件重置后的状态
    this.newDatePickedEvent.emit(this.selectedDate);
  }
}

父组件里要维护好newVisitDate这个变量，初始值要正确设置，比如预设为当前日期或者接口返回的日期：

import { Component } from '@angular/core';

@Component({
  selector: 'container-component',
  template: `
    <div class="row">
      <div class="col col-md-4 col-sm-4">
        <matDatepicker [initDate]="newVisitDate" 
                       (newDatePickedEvent)="setNewVisitDate($event)"></matDatepicker>
      </div>
      <!-- 父组件也可以加全局重置按钮 -->
      <button mat-raised-button (click)="resetGlobalDate()">全局重置</button>
    </div>
  `
})
export class ContainerComponent {
  // 预设初始日期，比如当前日期
  newVisitDate: Date = new Date();

  setNewVisitDate(date: Date) {
    this.newVisitDate = date;
  }

  resetGlobalDate() {
    // 父组件主动触发重置，把日期设为null或者初始值
    this.newVisitDate = null;
    // 如果子组件用了下面说的setter，这里赋值后子组件会自动同步
  }
}

如果需要父组件主动重置子组件的日期，只靠ngOnInit的初始化是不够的，因为它只执行一次。这时候可以给子组件的initDate加个setter，实时响应父组件的变化：

// 子组件里修改initDate的定义
private _initDate: Date;

@Input() set initDate(date: Date) {
  this._initDate = date;
  if (date) {
    this.selectedDate = new Date(date);
  } else {
    // 父组件传null时，直接清空日期
    this.selectedDate = null;
  }
}

get initDate(): Date {
  return this._initDate;
}

这样父组件只要修改newVisitDate的值，子组件就会自动同步更新日期选择器的内容。

• 日期实例引用问题：一定要创建新的Date实例，不要直接赋值引用，否则Angular的变更检测可能识别不到变化，导致日期不更新。
• 表单控件替代ngModel：如果你用的是FormControl而不是ngModel，逻辑类似，把selectedDate换成表单控件的value，初始化时用setValue赋值即可。
• 版本兼容性：确保你的@angular/material版本和Angular 5完全匹配，版本不兼容可能会导致各种奇怪的功能异常。

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