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

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

Answer 1

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

@ViewChildren（＆＃39; navigateButton＆＃39;）navigableButtons：QueryList <ElementRef>;

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

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

1 个答案: