Angular 7-當mat-datepicker的值綁定到可選輸入參數時，如何處理其更改事件

Question

我對棱角開發還很陌生。 我有一個mat-datepicker其值通過[(ngModel)]綁定到filterDate ，它也恰好是@Input()參數。 每當DatePicker的值更改時，我都會觸發一個handleChange事件，該事件發出datepicker值。 在執行期間，此組件可能會從任何父組件接收輸入。 盡管新值在瀏覽器中呈現，但沒有觸發更改事件。

由於這是Angular 7，因此我無法使用(ngModelChange) 。 我試過添加（更改）事件，還使用Subject<Date>手動預訂更改，但不幸的是，這些似乎都不起作用。

component.html

<input matInput [matDatepicker]="startPicker" [(ngModel)]="filterDate"
      (click)="startPicker.open()" (dateChange)="handleChange($event)">
<mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
<mat-datepicker #startPicker ng-model-options="{ timezone: 'utc'}"></mat-datepicker>

component.ts

@Input() filterDate: Date;
@Output() filterEvent = new EventEmitter<any>();

constructor(private datePipe: DatePipe) {
}

ngOnInit() {
}

handleChange(event) {
    this.filterEvent.emit(this.datePipe.transform(event.target.value, 'dd MMM yy'));
}

Answer 1

試試吧：

<input matInput [matDatepicker]="startPicker" [ngModel]="filterDate"
      (click)="startPicker.open()" (ngModelChange)="handleChange('input', $event)">
<mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
<mat-datepicker 
    (dateChange)="handleChange('change', $event)" 
    ng-model-options="{ timezone: 'utc'}" #startPicker ></mat-datepicker>