为什么Angular击键不同步运行？ 或者如何使它们同步运行？

Question

How can I make Angular 4/2 keystroke events run synchronously? When I run this code the keys are not always run in order of firing.

Template

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

Component

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

Answer 1

• Keyup is only fired when the key has literally become up and has no concern of other keystrokes.

• Keypress would be a better event to use in this scenario as it is always fired directly after keydown, and never before another keystroke.

• This is default behavior and not related directly to Angular.

Even in vanilla JS, the same behavior is observed:

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
});

(In this scenario I have used Angular's 'ngAfterViewChecked' lifecycle hook to handle the changes in state directly after the 'keydown' event has completed)