Angular响应式Tabs优化：如何将激活Tab固定在Dropdown前？

我现有一套Angular实现的Tabs组件（代码位于src/app/tabs/tabs.component.ts），能根据可用宽度自动把超出的Tab移入“更多”下拉菜单，功能运行正常。但存在一个问题：如果当前激活的Tab被藏进了下拉菜单，用户必须点开菜单才能看到选中项。我希望激活Tab永远不被隐藏，直接放在“更多”按钮前面，让用户一眼就能看到当前选中的Tab（效果参考：初始状态下Tabs正常排列，当宽度不足时，仅非激活的Tab被移入下拉，激活Tab始终留在外部）。

我尝试在primaryItems.forEach()方法中将激活Tab从hiddenItems数组中排除，但没有成功，想问下是不是应该用Array.splice()方法来实现这个逻辑？

内容的提问来源于stack exchange，提问作者inkflow