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

Question

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

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

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

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

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

Answer 1

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

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

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