Javascript 如何在使用angular8单击选项卡时将选项卡焦点放在第一个字段上

嗨，我一共有6个选项卡，点击一个选项卡，子选项卡就会打开。一旦子选项卡打开，我希望焦点放在每个选项卡的第一个子选项卡上。我尝试获取第一个选项卡的id，并尝试获取其中的子选项卡id。 例如：第一个选项卡是

details\u basic\u info

其子选项卡包含

tab-details\u basic\u info

。因此，我尝试获取详细信息，并在此基础上添加“tab-”，其id为单击的动态获取的主选项卡。但我未能实现。谁能帮帮我，怎么办

提前谢谢

演示：

---

如果是我的话，我可能会这样做（虽然方法处理的重复性稍低，但嘿，这只是一个简单的js概念验证，例如与引导结合在一起，但可以很容易地移植到angular）因此，您不必关心第一个可聚焦元素是什么，只要它是在可以聚焦的数组中提供的

希望这有帮助，干杯

const focusableList='按钮，[href]，输入，选择，文本区，[tabindex]：非（[tabindex=“-1”]）；
focusFirstFocusableChildPoC=（id）=>{
const contentPane=document.getElementById（id）；
如果（内容窗格）{
const focusableElements=contentPane.querySelectorAll（focusableList），
firstFocusable=focusableElements[0]；
//Typescript将希望此为focusableElements[0]；以强制转换。
setTimeout（函数（）{
//用'ol 0超时技巧将其踢到线的后面。
firstFocusable？firstFocusable.focus（）：notifyOfFailure（）；
}, 0); 
}否则{
通知失败（）；
}
}
notifyOfFailure=（）=>{
警惕（“你没有焦点！”）；
}

.tab内容{
填充：2rem；
}
.选项卡内容*：焦点{
轮廓：红色3px点；
}
.tab内容*：焦点：之后{
内容：“*”；
页边顶部：1rem；
颜色：红色；
}

钮扣
焦点测试
钮扣
钮扣
钮扣
这里没有什么要关注的，兄弟。。。

我通常不喜欢在这里为别人做事，但今天是周五，所以这应该能让你有更多的收获，尽管如果是我，我会更干净一点，干杯！非常感谢，但是如果你感觉不好，我很抱歉。我的本意并非如此。但是非常感谢，这真的节省了我的周末，我现在可以去做其他的工作了。我很抱歉，我还没有看到你在snipnet中随答案附上的演示。我不知道这是不是一个网络问题。现在，我可以访问您的代码片段以及forked演示。谢谢，但是sorryHi Chris，我在我的代码中尝试了同样的方法，但是这里的标签焦点是第二次点击，可能是什么问题？