[英]ngx-bootstrap popover close on outside click
i'm trying to create an Angular 4 custom form control as my date picker. 我试图创建一个Angular 4自定义窗体控件作为我的日期选择器。 I'm using ngx-bootstrap and i have so far setup this custom form control using an input, datepicker and popover component from ngx-bootstrap.
我正在使用ngx-bootstrap,到目前为止,我已经使用ngx-bootstrap的输入,datepicker和popover组件设置了此自定义表单控件。 The custom control opens a popover with the datepicker on focus, however, i need to be able to change date by interacting with the popover contents and it should close when iam not interacting with the popover or the input.
自定义控件将打开一个以日期选择器为焦点的弹出框,但是,我需要能够通过与弹出框的内容进行交互来更改日期,并且在iam不与弹出框或输入进行交互时应将其关闭。 I have tried to follow the hack on the ngx-bootstrap github issue .
我尝试遵循ngx-bootstrap github问题上的hack。 However it isn't working for my case.
但是,它不适用于我的情况。 Any help would be appreciated.
任何帮助,将不胜感激。
date-picker.component.html 日期picker.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>
date-picker.component.ts 日期picker.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();
}
}
This stays open even when i click outside the input or the popover. 即使当我在输入或弹出窗口之外单击时,它仍保持打开状态。 When is used the blur event, i couldn't even interact with the calendar.
使用模糊事件时,我什至无法与日历进行交互。 It would close even before i could select date.
它将在我选择日期之前关闭。
The @HostListener
decorator doesn't have a description in Angular API Doc , but it binds an event listener to the component host element. @HostListener
装饰器在Angular API Doc中没有描述,但将事件侦听器绑定到组件host元素。 In your case <app-date-picker>
. 在您的情况下
<app-date-picker>
。 But you want to hide the popover when you click anywhere outside of the popover itself, so you need to bind the listener to the whole page (document). 但是,当您单击弹出窗口本身之外的任何位置时,您都想隐藏该弹出窗口,因此需要将侦听器绑定到整个页面(文档)。 To do it, you must add the
document:
prefix to the event name: 为此,必须将
document:
前缀添加到事件名称:
@HostListener('document:click', ['$event'])
I don't know if there are some other supported prefixes, maybe window
. 我不知道是否还有其他受支持的前缀,也许是
window
。 You can play with the events using a Plunker (from this question ). 您可以使用Plunker处理该事件(来自这个问题 )。 There is also a question about the meaning of the HostListener decorator .
还有一个关于HostListener装饰器的含义的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.