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

将Renderer注入组件/指令。

抓住任何elementRef（例如您的按钮或链接）。

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

然后在你的处理函数中：

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

Answer 2

文档的activeElement可以是任何Element，而不仅仅是HTMLElement。在编译时，编译器不知道元素的类型。因此，如果在调用周围加上instanceof check，则编译器会知道activeElement 已是要执行代码的HTMLElement并允许引用。

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

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

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

2 个答案: