typescript - Angular Material Datepicker - nextClicked, previousClicked se ne emitiraju


Pokušavam koristiti Material Datepicker kako bih korisnicima omogućio rezervaciju. Želio bih pozvati internu metodu kada korisnik klikne na sljedeći ili prethodni mjesec u datepickeru. Vidim metode nextClicked i previousClicked, ali čini se da se one ne emitiraju pa ne mogu izvršiti vlastite radnje.

<input class="date-selected" [matDatepickerFilter]="checkInFilter" [matDatepicker]="checkInDatepicker" [min]="minDate" (focus)="checkInDatepicker.open()" [(ngModel)]="checkInDate">
<mat-datepicker #checkInDatepicker (nextClicked)="nextMonth($event)"
    (previousClicked)="previousMonth($event)">
</mat-datepicker>
nextMonth(event) {
    console.log(event);
}

previousMonth(event) {
    console.log(event);
}

Postoji li način da pozovem svoju metodu kada korisnik klikne na sljedeće/prethodno u odabiraču datuma?

Odgovor #1

Zaobišao sam ovo implementirajući prilagođeni zaglavlje i zajedničku uslugu.

U prilagođenom zaglavlju pozivam metodu u zajedničkoj usluzi koja postavlja varijablu i imam observabilan na tome.

onda se u glavnoj komponenti pretplatim na observable u konstruktoru i pozovem svoju prilagođenu metodu.

Metoda prilagođene zaglavlja

previousClicked(mode: 'month' | 'year') {
    this._calendar.activeDate = mode === 'month' ?
      this._dateAdapter.addCalendarMonths(this._calendar.activeDate, -1) :
      this._dateAdapter.addCalendarYears(this._calendar.activeDate, -1);

    this.calendarService.previousMonthClick(this._dateAdapter.getMonth(this._calendar.activeDate));
}

zajednička usluga

private _previousMonthClick = new Subject();
  previousMonthClick$ = this._previousMonthClick.asObservable();

....

  previousMonthClick(month) {
    this._previousMonthClick.next(month);
  }

glavna komponenta

constructor(private calendarService: CalendarService) {
    calendarService.previousMonthClick$.subscribe(e => this.previousMonth(e));
  }

...
 previousMonth(event) {
    console.log(event);
  }

Odgovor #2

Prvo i najvažnije: niti nextClicked niti previousClicked nisu emitera događaja, stoga ne proizvode nikakav izlaz. Provjerite ovo za dodatne informacije: https://material.angular.io/components/datepicker/api (obje su funkcije)

Možete koristiti monthSelected emitter i pokušati ga natjerati da radi s tim (pratite promjene i pozovite sljedeće/prethodno prema tome), iako ovo radi samo pri odabiru mjeseca (tj. odaberite godinu -> odaberite mjesec [emitter se aktivira] -> odaberite datum)