在Mat-datepicker中实现可变绑定

Question

描述

---

我正在尝试将MatDatePicker包装在称为MyDatePicker的自定义组件中，以便我可以在HTML中使用它。

essue

---

dateVariable总是不确定的，似乎我在下面实现的双向绑定似乎不起作用。用户从选择器中选择新日期后，将调用设置器。但是，新值未粘到dateVariable。

问题

---

• 如何在自定义日期选择器和变量之间实现双向绑定？
• 如何实现单向绑定(从日期选择器 ->变量(？

实施

---

html文件：

<my-datepicker [(selectedDate)]="dateVariable" placeholder="some text"></my-datepicker>
<button (click)="btnClick()">Show Selected Date</button>

TS文件：

//...
    dateVariable: string;       
    btnClick() {
      console.log('selected date:', this.dateVariable);
   }
//...

mydatepicker.component.ts

export class MyDatepickerComponent {
    dateValue: string;
    @Input() placeholder: string;
    @Output() dateChange: EventEmitter<string> = new EventEmitter<string>();
    @Input()
    get selectedDate() {
        console.log('getter');
        return this.dateValue;
    }
    set selectedDate(val) {
        console.log('setter');
        this.dateValue = val;
        this.dateChange.emit(this.dateValue);
    }
    pickerEvent(event: MatDatepickerInputEvent<Date>) {
        this.selectedDate = event.value.toISOString();
    }
}

mydatepicker.component.html：

<mat-form-field>
        <input matInput [matDatepicker]='pickerDate' placeholder='{{placeholder}}' (dateInput)="pickerEvent($event)">
        <mat-datepicker-toggle matSuffix [for]='pickerDate'></mat-datepicker-toggle>
        <mat-datepicker #pickerDate></mat-datepicker>
</mat-form-field>

Answer 1

如前所述：对于双向绑定的[()](香蕉in-a-box语法(我们必须用相应的@Output编写一个@Input，例如：

@Input() selectedDate: Date;
@Output() selectedDateChange: EventEmitter<Date> = new EventEmitter<Date>();

这可以与输入结合和单独的输出结合：

一起使用

<my-datepicker [selectedDate]="dateVariable" (selectedDateChange)="dateVariable = $event" placeholder="some text"></my-datepicker>

或用Angular提供的带有香蕉盒语法提供的一些句法糖：

<my-datepicker [(selectedDate)]="dateVariable" placeholder="some text"></my-datepicker>

旁边注：

1(我认为您需要用实际的Date值绑定matInput

<mat-form-field>
        <input matInput [matDatepicker]='pickerDate' [value]="selectedDate" placeholder='{{placeholder}}' (dateInput)="pickerEvent($event)">
        <mat-datepicker-toggle matSuffix [for]='pickerDate'></mat-datepicker-toggle>
        <mat-datepicker #pickerDate></mat-datepicker>
</mat-form-field>

2(如果要在角形式内使用my-datepicker，则需要实现ControlValueAccessor接口

3(如果您编写此自定义组件的唯一原因是您要使用ISO日期字符串作为输入，我建议在API/服务级别而不是在组件中处理此转换。

Answer 2

对于双向绑定起作用，Output()必须与带有后缀Change的Input()相同。因此，更改您的代码：

@Output() selectedDateChange: EventEmitter<string> = new EventEmitter<string>();

且在设定器中相同：

set selectedDate(val) {
    console.log('setter');
    this.dateValue = val;
    this.selectedDateChange.emit(this.dateValue);
}