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)
