html 在滚动条以外的任何位置单击时关闭ngbPopover

3vpjnl9f  于 2022-11-20  发布在  其他
关注(0)|答案(1)|浏览(134)

我在我的Angular 7项目中使用ngpopover来帮助用户选择日期范围。我已经创建了一个实现Onchanges的daterange组件,并且我在任何需要ngbpopover的地方导入它。
"我想做的事"
我希望当用户点击窗口的滚动条弹出窗口不应自动关闭,但如果用户点击弹出窗口以外的任何地方弹出窗口应自动关闭。
我的代码

HTML文件

<div (scroll) = "onScroll($event)">
<ng-template #popContent>
------
</ng-template>

 <button type="button" class="btn btn-date-selector" [placement]="defaultPlacement" 
 [ngbPopover]="popContent" [autoClose]="false" data-container="body" #popOver="ngbPopover">
 </div>

我曾尝试使用scroll事件来了解用户何时滚动特定页面TS FILE

@HostListener('window:scroll', ['$event']) private onScroll($event:Event) {
console.log($event.srcElement.scrollLeft, $event.srcElement.scrollTop);
};

但是hostlistener不工作。
既然我正在导入这个daterange popover组件,我怎么能检查父组件上的窗口滚动呢?太困惑了。
有没有什么方法可以检查用户是否点击了外部而不是窗口滚动条?

kse8i1jr

kse8i1jr1#

最后我已经能够做我想做的事情了。我创建了一个方法

(click)= onDateSelection($event) in my Datepicker HTML file

在我的ts文件中,我添加了类似这样的功能,为ngbPopOver添加了一个viewchild

@ViewChild('popOver') public popover: NgbPopover;

onDateSelection(event) {

 //after selection of date
 this.popover.close();
 
}

因此,在选择并发出Date之后,Datepicker模块应自行关闭。

相关问题