要解决"angular2-datetimepicker 不会在点击外部时关闭"的问题,你可以使用以下解决方法:
import { Component, ElementRef, HostListener } from '@angular/core';
@Component({
selector: 'app-datepicker',
template: `
`,
styles: [
`
.datetimepicker {
position: absolute;
/* datetimepicker样式 */
}
`
]
})
export class DatepickerComponent {
showDatePicker = false;
selectedDate: string;
constructor(private elementRef: ElementRef) { }
toggleDatePicker() {
this.showDatePicker = !this.showDatePicker;
}
@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent) {
if (!this.elementRef.nativeElement.contains(event.target)) {
this.showDatePicker = false;
}
}
}
在上面的代码中,我们使用了@HostListener
装饰器来监听整个文档的点击事件。当点击事件触发时,我们检查点击的目标元素是否在datetimepicker内部,如果不在,则关闭datetimepicker。
请注意,上述代码只是一个示例,你需要根据你的实际情况进行调整和修改。你需要将.datetimepicker
样式替换为你自己的datetimepicker样式,并在datetimepicker的内容部分添加你自己的日期选择器逻辑。
ngx-bootstrap
或ng-bootstrap
。这些库提供了更多的自定义选项和事件处理,可能更容易实现点击外部关闭的功能。希望这些解决方法对你有帮助!