如何在"mat-datepicker"中观察方法(来自另一个组件)

Question

我在组件中使用mat-datepicker：

.html：

<input
[(ngModel)]="date.from"
[matDatepicker]="picker"
[value]="fDate.value"
formControlName="dateFrom" 
id="dateFrom"
matInput
name="dateFrom"
required
>
<mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
<mat-datepicker #picker [calendarComponent]='calendarButtons'></mat-datepicker>

TS：

export class TempComponent implements OnInit {
calendarButtons = CalendarButtonsComponent;
// ...
constructor() {}
ngOnInit() {
this.fDate = new FormControl(moment());
this.date = {
from: this.fDate.value,
}
}
}

在CalendarButtonsComponent组件中，我有clean方法

.html：

<mat-icon (click)="nextClicked('month')">keyboard_arrow_right</mat-icon>
<mat-icon (click)="clean($event)">close</mat-icon>

TS：

export class CalendarButtonsComponent<D> implements OnDestroy {
@Output() eventEmitter = new EventEmitter<string>();
private _destroyed = new Subject<void>();
constructor(
private _calendar: MatCalendar<D>,
private _dateAdapter: DateAdapter<D>,
@Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
cdr: ChangeDetectorRef,
) {
_calendar.stateChanges
.pipe(takeUntil(this._destroyed))
.subscribe(() => cdr.markForCheck());
}
get periodLabel() {
return this._dateAdapter
.format(
this._calendar.activeDate,
this._dateFormats.display.monthYearLabel
)
.toLocaleUpperCase();
}
ngOnDestroy() {
this._destroyed.next();
this._destroyed.complete();
} 
nextClicked(mode: 'month' | 'year') { 
this._calendar.activeDate = mode === 'month'
? this._dateAdapter.addCalendarMonths(this._calendar.activeDate, 1)
: this._dateAdapter.addCalendarYears(this._calendar.activeDate, 1);
}
clean() { 
}  
}

我想使用clean方法来清理 date.from 模型。模型(this.date.from(位于TempComponent组件中。

我不知道CalendarButtonsComponent组件中发出的事件是如何在TempComponent组件中侦听的。

请帮忙。

Answer 1

使用输出...

在日历按钮组件中：

@Output() onClean = new EventEmitter<void>();
clean() { this.onClean.next(); }

然后在父模板中：

<calendar-buttons (onClean)="fDate.reset()"></calendar-buttons>