获取对当前活动的HTMLElement的引用

Question

所以我有一个Angular 2和Typescript项目,我希望在特定点击的页面上清除所有焦点.

现在我只是document.activeElement用来获取当前活动的元素,然后调用.blur()它.然而,这在语义上是不正确的,当然TypeScript正在抛出它(并且理所当然).

有什么方法可以完成同样的事情,但确保我引用的是一个HTMLElement而不是Element所以我可以保持正确输入的东西？

基本上我在调用函数来关闭所有子菜单时A)单击子导航并单击菜单项已经打开,并且B)当文档被点击在不是菜单项的任何地方时.

这是被调用的函数:

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

    document.activeElement.blur();
};

这给出了错误:

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

这是绝对正确的,它存在于HTMLElement.但是,如果我添加此行:

console.log(document.activeElement instanceof HTMLElement);

这返回true.所以我对TypeScript在这里想要什么感到非常困惑？

Answer 1

将a Renderer注入组件/指令.

掌握任何内容elementRef(例如您的按钮或链接).

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

然后在你的处理函数中:

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

Answer 2

文档的 activeElement 可以是任何 Element，而不仅仅是 HTMLElement。在编译时，编译器不知道元素将是什么类型。因此，如果你周围的呼叫与instanceof检查，编译器知道在activeElement已成为要执行的代码一个HTMLElement并允许参考。

if (document.activeElement instanceof HTMLElement) {
  document.activeElement.blur();
}

这种方法不需要您跳过获取不同 Angular 绑定来执行您已经可用的方法的过程。更少的代码和更少的依赖！