Question

如何让Angular 4/2击键事件同步运行？当我运行此代码时，键并不总是按触发顺序运行。

模板

<div
  contenteditable="true"
  (keydown)="divKeyDown($event)"
  (keyup)="divKeyUp($event)">
</div>

组件

divKeyDown(event) {
  console.log('Keydown');
  // OFTEN GETS FIRED BEFORE KEYUP OF PREVIOUS STROKE
}
divKeyUp(event) {
  console.log('Keyup');
}

Answer 1

只有当密钥完全变为up并且不关心其他按键时才会触发密钥。
在这种情况下使用Keypress是一个更好的事件，因为它总是在keydown之后直接触发，而且从未在另一次击键之前触发。
这是默认行为，与Angular没有直接关系。

即使在香草JS中，也会出现同样的行为：

document.getElementById('main').addEventListener('keydown', event => {
    console.log('keydown'); // FIRED ONCE
});
document.getElementById('main').addEventListener('keypress', event => {
    console.log('keypress'); // FIRED AFTER KEYDOWN
});
document.getElementById('main').addEventListener('keyup', event => {
    console.log('keyup'); // FIRED WHEN THE KEY HAS LITERALLY BEEN RELEASED
});

（在这种情况下，我使用了Angular＆＃39; ngAfterViewChecked＆＃39;生命周期挂钩，以便在“keydown＆＃39;事件完成后直接处理状态变化”

为什么Angular Keystrokes不能同步运行？或者我如何让它们同步运行？

1 个答案: