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

Question

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

@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包中提供了一个常量文档，您可以在组件的构造函数中与注入一起使用

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

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