Angular 4 使用 Renderer2/HostListener 来点击外部事件

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-b​​rowser 包中提供了一个常量 DOCUMENT，您可以在组件的构造函数中将其与注入一起使用

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

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