Question

我开发了一个由基本输入字段和建议下拉列表组成的组件，当用户点击输入时显示该列表（类似于ng-select）。但是，当用户想要关闭下拉列表时，可以使用tab / shift-tab / esc / ...取消聚焦，也可以单击整个组件外的某个位置。在Angular 4中为浏览器平台开发时，使用HostListener，ElementRef和nativeElement非常简单。我目前的浏览器平台解决方案（也见于其他SO question）：

@HostListener('document:click', ['$event'])
onClickedOutside(event: any): void {
  if (!this.elementRef.nativeElement.contains(event.target)) {
    this.hideDropdown();
  }
}

由于Angular的目标是平台独立，我希望将此组件标准化为与webworker平台（沿浏览器平台）兼容，因为我想在我的项目中使用它（想法是将一些计算逻辑转移到客户端，最小化服务器上的工作负载，仍然具有响应式UI）。我已经尝试用其他一些可以执行检查的方法替换... nativeElement.contains ...，但不幸的是，当这个事件在webworker平台下被触发时，$event只有一些关于鼠标位置的基本信息，没有实际目标，这是点击（我认为显示了DomRenderer类的属性）。

我对webworker平台的当前状态并不是很了解，如果它已经准备好了，那么我正在寻找解决方案或解决如何跟踪外部点击的问题。如果这在某种程度上是不可能的，我会请你至少描述为什么我的想法无法实现或你将如何实现（例如留在浏览器平台上并在支持时使用webworker平台）。提前谢谢！

Answer 1

Angular 4在@ angular / platform-browser包中提供了一个常量DOCUMENT，您可以在组件的构造函数中使用注入

import { Inject } from "@angular/core";
import { DOCUMENT } from "@angular/platform-browser";

export class DumpComponent implements OnInit {
 constructor(@Inject(DOCUMENT) private document: Document) { }
}

Angular 4使用Renderer2 / HostListener进行单击的外部事件

1 个答案: