我正在尝试创建一个 Angular 4 自定义表单控件作为我的日期选择器。我正在使用 ngx-bootstrap,到目前为止,我已经使用 ngx-bootstrap 的输入、日期选择器和弹出框组件设置了这个自定义表单控件。自定义控件打开一个带有焦点的日期选择器的弹出框,但是,我需要能够通过与弹出框内容交互来更改日期,并且当我没有与弹出框或输入交互时它应该关闭。我试图关注ngx-bootstrap github 问题上的 hack 。但是它不适用于我的情况。任何帮助,将不胜感激。
日期选择器.component.html
<input type="text" [value]="getDate() | date:'fullDate'" #popover="bs-popover" [placeholder]="placeholder" class="form-control" triggers="" (focus)="popover.show()" [popover]="popTemplate" container="body" required>
<template #popTemplate>
<datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"
[dateDisabled]="dateDisabled"></datepicker>
</template>
日期选择器.component.ts
@Component({
selector: 'app-date-picker',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatePickerComponent),
multi: true
}
]
})
export class DatePickerComponent implements OnInit, ControlValueAccessor {
@ViewChild('popover') popover;
isOpen = false;
@Input('placeholder') placeholder;
constructor(private _er: ElementRef) {
}
@HostListener('click', ['$event']) onClick(event): void {
console.log(event);
if (
this.isOpen
&& !this._er.nativeElement.contains(event.target)
&& !this.popover._popover!._componentRef!.location.nativeElement!.contains(event.target)
) {
this.hide();
}
}
hide() {
this.isOpen = false;
this.popover.hide();
}
show() {
this.isOpen = true;
this.popover.show();
}
}
即使我在输入或弹出框之外单击,它也会保持打开状态。当使用模糊事件时,我什至无法与日历交互。它甚至在我选择日期之前就会关闭。