Question

我想在关闭mat-datepicker弹出窗口时执行一些操作，但仅当用户单击日期时才执行（如果通过转义键或背景幕单击关闭了弹出窗口，则该操作不应触发）。

我知道有一个@Output('closed') closedStream: EventEmitter<void>，但是每次关闭弹出窗口时都会触发。我的想法是检测打开的事件与关闭的事件之间是否存在dateChange事件，但是如果用户单击已选择的日期，则该事件不起作用。

我尝试使用自定义DateAdapter（覆盖sameDate或compareDate方法以返回所选日期总是不同于当前所选日期的方法来解决此问题），但似乎mat-month-view组件却没有使用DateAdapter在发出选择更改之前比较日期：

_dateSelected(date: number) {
    if (this._selectedDate != date) {
      const selectedYear = this._dateAdapter.getYear(this.activeDate);
      const selectedMonth = this._dateAdapter.getMonth(this.activeDate);
      const selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);

      this.selectedChange.emit(selectedDate);
    }

    this._userSelection.emit();
}

不确定这本身是否是错误...

有人知道通过日期选择是否关闭了重要的日期选择器弹出窗口的简单方法吗？我缺少明显的东西吗？

谢谢！

Answer 1

如果您想知道是否使用[ngModel] +（ngModelChange）或formControl进行某些更改，我认为这是一种方法

  <input matInput [ngModel]="date" (ngModelChange)="change($event)"
        [matDatepicker]="picker" placeholder="Choose a date">
  //in .ts
  date:any;
  change(date:any)
  {
    this.date=date;
    console.log("change")
  }

或

  <input matInput [formControl]="formControl" [matDatepicker]="picker2" 
           placeholder="Choose a date">
   //in .ts
  formControl:FormControl=new FormControl()
  ngOnInit()
  {
    this.formControl.valueChanges.subscribe(res=>{
      console.log("change formControl")
    })
  }

查看simple stackblitz

是否有办法知道因为单击了日期，所以关闭了mat-datepicker弹出窗口

1 个答案: