如何将 PrimeNg 表格行设置为文档的 activeElement答案

【问题标题】：How to set PrimeNg Table row as activeElement of the document如何将 PrimeNg 表格行设置为文档的 activeElement
【发布时间】：2019-08-15 11:48:42
【问题描述】：

我正在开发一个项目，以创建到 PrimeNg 的表格组件的自定义键盘导航。他们的键盘导航对我们来说不够强大。问题是让 document.activeElement 成为我所在的当前行。它似乎总是作为 activeElement 的文档正文，而不是我关注的行。

老实说，在这一点上，我什至不知道该尝试什么。这是我试图开始工作的代码。这发生在 Angular 5 和更新版本 Angular 7 中。

    onRowClick(el: HTMLElement) {
        el.removeEventListener("focusout", this.unFocusRow);
        const prevElements = document.getElementsByClassName("row-focused");
        for (let i = 0; i < prevElements.length; i++) {
            prevElements.item(i).classList.remove("row-focused");
        }
        el.classList.add("row-focused");
        el.focus();
        console.log(document.activeElement); // this should be "el" since we focused it
        el.addEventListener("focusout", this.unFocusRow);
    }

    unFocusRow() {
        const prevElements = document.getElementsByClassName("row-focused");
        if (prevElements.length > 0) {
            for (let i = 0; i < prevElements.length; i++) {
                prevElements.item(i).classList.remove("row-focused");
            }
        }
    }

我希望 console.log 是 el 的值，即我单击的行。 el.focus() 似乎没有将其注册为 activeElement。实际的 console.log 是文档的正文，而不是那一行。

我创建了一个 stackblitz 来演示这一点。 https://stackblitz.com/edit/ang5-hostlistener stackblitz 适用于 Angular 5，但同样的行为也发生在 Angular 7 中。

提前感谢您的帮助。

【问题讨论】：

为什么要得到activeElement？
@StepUp - 用于实现键盘导航。单击该行后，我应该能够点击向下箭头，并且事件目标应该是我之前单击的行。但是由于它没有被设置为activeElement，所以事件是由body触发的。
@StepUp 如果您检查堆栈闪电战，还有一个主机侦听器，正在侦听键盘事件。键盘事件目标应该是我之前点击的那一行。

标签： angular angular5 angular7 primeng primeng-turbotable

【解决方案1】：

我的 stackblitz 没有我们在其中设置的所有属性，因为我把它简化了一点。事实证明，primeng 属性之一是从我们的行中删除 tabindex。从版本 5 升级到 7 时，这一定发生了变化。

【讨论】：