首页 文章

如何在每次更改时在组件内使用Angular输入指令

提问于
浏览 次
1

我 Build 了一个名为 intellark 的指令 . 它会在输入时将QWERTY键转换为阿拉伯语键 . 它工作正常 . 在指令中使用console.log时，会显示每个转换后的字母，并相应地转换字母（键入英文，转换并以阿拉伯语显示） . 我以这种方式构建它，以便通过在任何HTML输入组件上添加指令名称 intellark ，相应地转换输入键 .

我的问题是这个 . 与下图中显示的指令 keyPress() 方法中的行为不同，当我在 app.component.html 中添加HTML输入组件时，将指令 intellark 添加到 app.component.ts 中将其绑定到 inputText ，方法 showIt() 未在键上调用输入事件 . 它确实按下BACKSPACE后收到了活动！

所以，某种程度上存在脱节 . 如何使方法 showIt() 动态监听输入事件？

虽然我可以使用诸如服务，EventEmitter，Subject和/或@Output之类的技术将输出发送到订阅组件，但我确信这些不是解决此问题的正确方法 .

有关如何使用非指令组件注册输入事件的任何想法？下图显示了我为此构建的所有内容 .

enter image description here

angular angular-directive

1 回答

  • 1

    你可以像下面的输入框一样

    <input #box (keyup)="onKey(box.value)">

    因为在typscipt文件.ts文件中暴露 $event 你在后端代码.ts文件中暴露模板这是不好的做法，并使用 keyup ，将输入框的值传递给你的代码 onKey 事件 .

    回复于

相关问题