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

用户8707389

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

       <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 个按钮)。我在函数中设置了 disabled 属性,但我真的很喜欢有指令或独立于这个函数的东西。

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

用户8707389

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章