Question

我的项目中有一个过滤器弹出窗口，将其作为选择器（）放入模板中，并通过ngIf指令控制可见性，我的最终目标是在用户单击外部时隐藏过滤器，我部分是通过以下方式实现的：-

首先观看DOM点击事件
通过向其中注入elementRef并测试用户单击区域是否包含该元素来获取过滤器元素。

类似：

this.filterElement.nativeElement.container(the_clicked_area)

这很好用，但是我在过滤器表单中有一个日期字段，即ngx-bootstrap datepicker，它显示单击时的日期选择器，现在，当用户选择数据时，过滤器元素将其视为自日期以来的“外部点击”选择器不在elementRef内，如何防止在选择日期选择器时隐藏过滤器？

我想到的第一个解决方案是获取datepicker，然后在我的DOM click事件处理程序方法中忽略它，但是我不知道如何以可用的方式获取datepicker作为elementRef检查类似nativeELement.container（datePicker），

我尝试使用此处提供的方法来获取它： How can I select an element in a component template?

尽管我将elep.nativeElement.querySelector方法中的.bs-datepicker-container容器放在了datepicker容器中，但我还是得到了null，我也尝试了@ContentChildren和@ViewChild，但无济于事，

经过一番检查，我发现日期选择器实际上附加在了身上，所以现在的问题是

您如何从身体的一个组成部分和元素中获取信息？

Answer 1

因此，解决方案首先是通过 document.getElementsByTagName('bs-datepicker-container').item(0)

.item(index)返回一个HTML元素，您可以运行点击事件的.contains(event.target)签入处理程序

然后，它很简单地忽略或单击操作。

编辑：在本部分的问题中 “但是，尽管将.bs-datepicker-container容器放在了datepicker上，但我仍然在eleRef.nativeElement.querySelector方法中获得了null，我也尝试了@ContentChildren和@ViewChild，但无济于事，”

它返回了null，因为日期选择器被附加在Angular引导所在的app-root标记之外的body标记上，因此无法将其放入过滤器元素的EleRef中，因为它不在过滤器或事件app-root中< / p>

如何获得动态添加的DOM元素？

1 个答案: