使用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) { }
}