如何在每次更改时在组件内使用 Angular 输入指令
How to use an Angular input directive inside a component on every change
我构建了一个名为 intellark 的指令。它将输入的 QWERTY 键即时转换为阿拉伯语键。它工作正常。在指令中使用 console.log 时，会显示每个转换后的字母，并相应地转换字母（输入英文，转换并显示为阿拉伯语）。我以这种方式构建它，以便通过在任何 HTML 输入组件上添加指令名称 intellark，输入键会相应地转换。
我的问题是这样的。与下图所示指令的 keyPress() 方法中的行为不同，当我将 HTML 输入组件添加到 app.component.html 时，将其添加到指令 intellark，2-way将其绑定到 app.component.ts 内的 inputText，方法 showIt() 不会在键输入事件上调用。然而，它确实在按下 BACKSPACE 时收到了事件！
因此，不知何故存在脱节。如何让方法 showIt() 即时侦听输入事件？
尽管我可以使用诸如服务、EventEmitter、Subject and/or @Output 之类的技术将输出发送到订阅组件，但我确信这些不是解决此问题的正确方法。
知道如何使用非指令组件注册输入事件吗？下图显示了我为此构建的所有内容。
输入框可以像下面这样吗
<input #box (keyup)="onKey(box.value)">
因为通过在 typscipt 文件 .ts 文件中公开 $event 你在后端代码 .ts 文件中公开模板，这是不好的做法，并利用 keyup，将输入框的值传递给你编码 onKey 事件。
我构建了一个名为 intellark 的指令。它将输入的 QWERTY 键即时转换为阿拉伯语键。它工作正常。在指令中使用 console.log 时，会显示每个转换后的字母，并相应地转换字母（输入英文，转换并显示为阿拉伯语）。我以这种方式构建它，以便通过在任何 HTML 输入组件上添加指令名称 intellark，输入键会相应地转换。
我的问题是这样的。与下图所示指令的 keyPress() 方法中的行为不同，当我将 HTML 输入组件添加到 app.component.html 时，将其添加到指令 intellark，2-way将其绑定到 app.component.ts 内的 inputText，方法 showIt() 不会在键输入事件上调用。然而，它确实在按下 BACKSPACE 时收到了事件！
因此，不知何故存在脱节。如何让方法 showIt() 即时侦听输入事件？
尽管我可以使用诸如服务、EventEmitter、Subject and/or @Output 之类的技术将输出发送到订阅组件，但我确信这些不是解决此问题的正确方法。
知道如何使用非指令组件注册输入事件吗？下图显示了我为此构建的所有内容。
输入框可以像下面这样吗
<input #box (keyup)="onKey(box.value)">
因为通过在 typscipt 文件 .ts 文件中公开 $event 你在后端代码 .ts 文件中公开模板，这是不好的做法，并利用 keyup，将输入框的值传递给你编码 onKey 事件。