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