Я новичок в angular и пытаюсь реализовать пользовательский компонент DatePicker (который позволяет выбирать только месяц и год), и у меня возникают проблемы с доступом к его значению из отдельного компонента.Я изменил один из примеров из https://v7.material.angular.io/components/datepicker/overview и пытаюсь использовать предложения из этого конкретного сообщения stackoverflow / ответ: https://stackoverflow.com/a/50723598 (раздел Angular 7+).
Вот мой месяц-year-datepicker.component.html:
<mat-form-field class="reporting-datepicker">
<input matInput [matDatepicker]="dp" [(ngModel)]="inputValue" (ngModelChange)="inputValueChange.emit(inputDPValue)" [min]="minDate">
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp
[startView]="viewMode"
(yearSelected)="chosenYearHandler($event, dp)"
(monthSelected)="chosenMonthHandler($event, dp)"
panelClass="">
</mat-datepicker>
</mat-form-field>
Вот мой месяц-год-datepicker.component.ts (соответствующие части):
@Component({
selector: 'month-year-datepicker',
templateUrl: 'month-year-datepicker.component.html',
styleUrls: ['month-year-datepicker.component.css'],
providers: [
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS}
],
})
export class MonthYearDatepicker {
viewMode: string = "year";
minDate: Moment;
@Input() yearOnly: boolean = false;
@Input() inputValue: Moment;
@Output() inputValueChange: EventEmitter<Moment> = new EventEmitter<Moment>();
constructor() {}
ngOnInit() {
if (this.yearOnly)
this.viewMode = "multi-year"
this.minDate = moment().subtract(5, 'months');
}
chosenYearHandler(normalizedYear: Moment, datepicker: MatDatepicker<Moment>) {
var ctrlValue = moment(this.inputValue);
ctrlValue.year(normalizedYear.year());
this.inputValue = ctrlValue;
if (this.yearOnly) datepicker.close();
}
chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
var ctrlValue = moment(this.inputValue);
ctrlValue.month(normalizedMonth.month());
this.inputValue = ctrlValue;
datepicker.close();
}
}
А потом, в моем отдельномВ файл report.component.html я добавляю указатель даты, например:
<month-year-datepicker [yearOnly]="false" [(inputValue)]="datepickerValue" ngDefaultControl></month-year-datepicker>
Однако в моем отдельном файле reports.component.ts (упрощенно) я не могу получить доступ к значению datepickerValue:
export class ReportingComponent extends ComponentBase implements OnInit, OnDestroy {
datepickerValue: Date;
constructor() {}
ngOnInit(){}
getDate() {
return this.datepickerValue; // <- this is undefined still
}
}
Я явно что-то упускаю или неправильно понимаю, как работает связывание между компонентами, и буду очень признателен за любую помощь!Спасибо!