Angular 12中keyup、keydown、blur事件不触发仅click正常如何解决

问题根因 #

你的事件绑定语法不符合Angular规范：Angular绑定原生DOM事件时，直接使用事件名即可，不需要加on前缀。你代码中写的(onkey)并非合法的事件绑定规则，所以对应的触发逻辑不会执行。

修正后的模板代码（allEvents.html） #

<button (click)="myEvent('I am click event')" >Click Event</button>
<br><br>
<!-- 分别绑定keyup、keydown、blur事件示例 -->
<input 
  type="text" 
  (keyup)="myEvent($event)"
  (keydown)="myEvent($event)"
  (blur)="myEvent('input blur event triggered')"
/>

绑定规则说明 #

所有原生DOM事件都可以按照这个规则绑定，常见对应关系如下：

• 原生onclick 对应 Angular (click)
• 原生onkeyup 对应 Angular (keyup)
• 原生onkeydown 对应 Angular (keydown)
• 原生onblur 对应 Angular (blur)
• 原生oninput 对应 Angular (input)

修改后重新启动开发服务，即可看到所有绑定的事件都能正常输出日志。

内容的提问来源于stack exchange，提问作者Bilal