在中实现变量绑定

Question

描述

我试图将MatDatePicker封装在一个名为MyDatePicker的自定义组件中，以便在html中使用它，如下所示。

问题

dateVariable总是没有定义，而且我在下面实现的双向绑定似乎不起作用。一旦用户从选择器中选择了一个新日期，就会调用setter。但是，新值没有绑定到dateVariable。

问题

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

Implementation

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

如前所述:对于双向绑定[()] (banana语法)，我们必须使用相应的@Output编写一个@Input，如：

@Input() selectedDate: Date;

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

这可以与输入绑定和单独的输出绑定一起使用：

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

或者用一个小的语法糖提供的角与香蕉的盒子语法：

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

备注：

1)我认为还需要将matInput与实际的Date值绑定

<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);
}