使用Renderer2/HostListener进行点击的外部活动的角度4

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(); 
    } 
} 

由于角的目标是成为平台indpendent，我要规范这个组件是与webworker平台（沿浏览器平台）兼容，因为我想在我的项目中使用它（想法是将一些计算逻辑转移到客户端，以尽量减少服务器上的工作负载，并且仍然具有响应式UI）。我已经尝试用其他方法代替... nativeElement.contains ...进行检查，但不幸的是，当这个事件在webworker平台下触发时，$event只有一些关于鼠标位置的基本信息，没有实际的目标被点击（我认为DomRenderer类的属性被显示）。

我并不十分了解webworker平台的当前状态，如果它准备好了这样的事情，那么我正在寻找有关如何跟踪外部点击的解决方案或解决方法。如果这在某种程度上是不可能的，我会请你至少描述为什么我的想法不能实现，或者你会怎么做（例如，当浏览器平台支持时，使用webworker平台）。先谢谢你！

Answer 1

角4提供了@角/平台的浏览器程序包的常数文件，它可以在构造与注射用你的组件的

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

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