用于按钮禁用属性更改的 Angular 5 侦听器或指令

Question

我想为按钮创建一种指令(？)或侦听器。这个想法是当按钮被禁用时，它将移动并聚焦到下一个按钮。我想有一个循环，不是在所有元素之间移动，而只是在我将定义的按钮之间移动。

<button id="btn1" #button1 [disabled]="checkIfIsDisable()" nextActivekBtn>
Ändern
</button>
<button #button2 type="button"  [disabled]="checkIfIsDisable()">
Text1
</button>
<button #button3 type="button"  [disabled]="checkIfIsDisable()">
Text1
</button>
<button #button4 type="button"  [disabled]="checkIfIsDisable()">
Text1
</button>
<button #button5 type="button"  [disabled]="checkIfIsDisable()">
Text1
</button>

我的想法是有指令(如nextActiveBtn)将侦听按钮属性(禁用)，然后调用父组件函数，该函数将决定要聚焦的按钮或元素。我也想知道我是否可以在这些按钮上使用 ViewChildren？假设我在 html 中有很多按钮，但我希望有它们的子集(只有这 5 个按钮)。我在函数中设置了禁用属性，但我真的很喜欢有指令或独立于此函数的东西。

感谢您的任何建议或新想法。

Answer 1

指令不是一个好的选择。更好的解决方案是在管理当前焦点按钮的组件中创建功能。此外，我为每个按钮添加#navigableButton，并创建列表包含每个按钮。

@ViewChildren('navigateButton') navigableButtons：QueryList<ElementRef>;

多亏了这些，我可以轻松地在循环中找到下一个活动按钮并移动到它。用于管理当前按钮焦点的函数在禁用按钮的函数之后调用。