angular - 用于按钮禁用属性更改的 Angular 5 侦听器或指令
问题描述
我想为按钮创建一种指令(?)或侦听器。这个想法是当按钮被禁用时,它将移动并聚焦到下一个按钮。我希望有一个循环来在不是所有元素之间移动,而只是在我将定义的按钮之间移动。
<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 属性,但我真的很喜欢有指令或独立于这个函数的东西。
感谢您的任何建议或新想法。
解决方案
指令不是一个很好的选择。更好的解决方案是在管理当前焦点按钮的组件中创建函数。我还添加#navigableButton
到每个按钮并创建包含每个按钮的列表。
@ViewChildren('navigateButton') navigableButtons:QueryList
<ElementRef>
;
多亏了这些,我可以很容易地找到循环中的下一个活动按钮并移动到它。在禁用按钮的函数之后调用管理当前按钮焦点的函数。
推荐阅读
- c++ - 带有函数 ptr 的 BST,如何添加额外的参数?
- javascript - 使用 ReactJs 使用 UseContext 时遇到问题,我需要更改一个组件中的状态变量,并希望在另一个组件中更新状态
- compiler-construction - 为什么每个状态在`LR`解析表中最多出现一个`GOTO`列?
- python - 无法在 python 中安装包,readline (setup.py) 的错误构建轮
- python - 使用 Tensorflow 的 Dataset API 加载示例时出现类型错误
- python - 从 RGB 颜色列表在 python 中创建颜色映射
- three.js - 如何在 GLSL 中平滑淡化 2 个没有 alpha 的纹理?
- html - 使用角度路由器和 routerlinkactive 无需更改路由
- reactjs - React Development Server(启动脚本)导致与 socket.io 服务器的重复连接
- html - 如何使用 css 调整 img 的大小,特别是 flexbox