Angular 4 mit Renderer2/HostListener für angeklicktes externes Ereignis

Question

Ich habe eine Komponente entwickelt, die aus einem Basis-Eingabefeld und einer Vorschlagsliste besteht, die angezeigt wird, wenn der Benutzer auf Eingaben klickt (ähnlich ng-select). Wenn der Benutzer jedoch die Dropdown-Liste schließen möchte, kann er entweder mit tab/shift-tab/esc/... unfokussiert werden oder er kann irgendwo außerhalb der gesamten Komponente klicken. Bei der Entwicklung für die Browser-Plattform in Angular 4 ist dies mit HostListener, ElementRef und nativeElement recht einfach. Meine aktuelle Lösung für Browser-Plattform (auch in anderen SO question gesehen):

@HostListener('document:click', ['$event']) 
onClickedOutside(event: any): void { 
    if (!this.elementRef.nativeElement.contains(event.target)) { 
    this.hideDropdown(); 
    } 
} 

Seit Angular Ziel ist Plattform indpendent zu sein, ich will diese Komponente standardisieren mit Webworker Plattform kompatibel zu sein (entlang Browser-Plattform), weil Ich möchte es in meinem Projekt verwenden (Idee ist es, einige Berechnungslogiken auf die Client-Seite zu übertragen, um die Arbeitslast auf dem Server zu minimieren und trotzdem eine responsive Benutzeroberfläche zu haben). Ich habe bereits versucht, ... nativeElement.contains ... mit einer anderen Methode zu ersetzen, die Prüfung durchführen würde, aber leider, wenn dieses Ereignis unter webworker Plattform ausgelöst wird, $event hat nur einige grundlegende Informationen über die Mausposition, ohne das tatsächliche Ziel, das geklickt wird (ich denke, Eigenschaften der DomRenderer-Klasse werden gezeigt).

Ich bin nicht wirklich gut informiert mit dem aktuellen Stand der Webworker-Plattform und wenn es für solche Dinge bereit ist, so suche ich nach der Lösung oder Workaround, wie man Außenklick verfolgen. Wenn das irgendwie nicht möglich ist, würde ich Sie bitten, zumindest zu beschreiben, warum meine Idee nicht implementiert werden kann oder wie Sie es tun würden (zum Beispiel auf der Browser-Plattform bleiben und webworker platform verwenden, wenn dies unterstützt wird). Vielen Dank im Voraus!

Answer 1

Angular 4 liefert eine konstante DOCUMENT in @ Winkel/Plattform-Browser-Paket, das Sie mit der Injektion in den Konstruktor Ihrer Komponente

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

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