如何从焦点事件中获取目标作为 HTMLElement？

Question

我正在使用 angular-material mat-checkbox，在复选框内我有一些可聚焦的元素。 我的目标是根据设计为它们设计样式。

我想从 FocusEvent 中获取目标元素，检查其标签名称或/和 class，然后将另一个 class 添加/删除。

我的问题是我无法正确处理Typescript。 FocusEvent 有 target 属性，但它是 EventTarget 类型，只有三个方法。 我无法从此 EventTarget 中获取 HTMLElement。

请告诉我，修复它的正确 Typescript 方法是什么。 我的代码是：

模板：

(focusout)="onFocusOut($event.target)"

Controller：

onFocusOut(target: HTMLElement): void {
    if (target.tagName === 'INPUT') {
      // some logic here
    }
  }

IDE 将$event.target标记为错误类型， EventTarget不是HTMLElement 。

Answer 1

谢谢@MrRobot，我已经通过@ViewChild 完成了。 解决方案有所改变，但有效。 出于我的目的，在 mat-checkbox 中获取输入元素就足够了。 当我得到它时，我检查了 document.activeElement === hiddenMatInput，所以我可以将我的逻辑相对于重点元素应用。 PS：FocusEvent 中没有 event.currentTarget 和 event.target。