Verweise auf das gerade aktive HTMLElement

Question

Also habe ich ein Angular 2 und Typescript-Projekt, und ich möchte alle Fokus auf der Seite auf einen bestimmten Klick löschen.

Im Moment benutze ich nur document.activeElement, um das gerade aktive Element zu erhalten, und rufe dann darauf an. Dies ist jedoch nicht symptomatisch korrekt, und natürlich wirft TypeScript (und das zu Recht) einen Fehler daraus.

Gibt es eine Möglichkeit, die gleiche Sache zu erreichen, aber stellen Sie sicher, dass ich eine HTMLElement referenzieren statt Element, damit ich Dinge richtig eingegeben halten kann?

Grundsätzlich rufe ich eine Funktion auf, um alle Untermenüs zu schließen, wenn A) auf das Subnav geklickt wird und der angeklickte Menüeintrag bereits geöffnet ist und B) wenn auf das Dokument irgendwo geklickt wird, das kein Menüelement ist. Hier

ist die Funktion, die aufgerufen wird:

closeMenus = function(){ 
    for (var i=0, j=this.openElements.length; i<j; i++){ 
     this.openElements[i] = false; 
    }; 

    document.activeElement.blur(); 
}; 

Dies gibt den Fehler:

Property 'blur' does not exist on type 'Element' 

Welche absolut richtig ist, es auf HTMLElement existiert. Wenn ich jedoch diese Zeile hinzufüge:

console.log(document.activeElement instanceof HTMLElement); 

Dies gibt wahr zurück. Ich bin also sehr verwirrt darüber, was TypeScript hier will?

Answer 1

In die Komponente/Direktive einen Renderer einspeisen.

Erhalten Sie eine beliebige elementRef (zum Beispiel Ihre Schaltfläche oder Link).

constructor(private elRef: ElementRef, private renderer: Renderer){ 
} 

dann in der Handler-Funktion:

this.renderer.invokeElementMethod(
    this.elRef.nativeElement.ownerDocument.activeElement, 'blur');