时间戳

首页 > 解决方案 > 如何观察“mat-datepicker”中的方法（来自另一个组件）

angular - 如何观察“mat-datepicker”中的方法（来自另一个组件）

问题描述

我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。

请帮忙。

标签： angular

解决方案

使用输出...

在日历按钮组件中：

@Output() onClean = new EventEmitter<void>();

clean() { this.onClean.next(); }

然后在父模板中：

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

推荐阅读