0

描述

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

问题

始终未定义，似乎我在下面dateVariable实现的双向绑定不起作用。一旦用户从选择器中选择了一个新的日期，setter 就会被调用。但是，新值未绑定到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>
4

2 回答 2

1

要使双向绑定起作用，Output()必须将其命名为与Input()带后缀的 相同Change。所以改变你的代码：

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

和二传手一样：

set selectedDate(val) {
    console.log('setter');
    this.dateValue = val;
    this.selectedDateChange.emit(this.dateValue);
}
于 2019-07-31T17:32:18.400 回答
1

如前所述：对于双向绑定[()]（banana-in-a-box 语法），我们必须编写一个@Input对应的@Output类似：

@Input() selectedDate: Date;

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

这可以与 Input-Binding 和单独的 Output-Binding 一起使用：

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

或者使用 Angular 提供的一些语法糖，使用香蕉盒中的语法：

<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在 Angular 表单中使用，你需要实现ControlValueAccessor接口

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

于 2019-07-31T17:59:20.677 回答