当我在 angular 中使用 "key" 而不是 "keyCode" 和 "KeyboardEvent" 时出现错误

Question

我正在尝试为输入字段（文本框）创建一个自定义指令，以便它只接受数字而不接受字母字符。

我有以下（仅-numbers.directive.ts）文件：

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: "[onlyNumbers]"
})
export class OnlyNumbersDirective {
  constructor(private el: ElementRef) {}

  @HostListener('keydown', ['$event'])
  onKeyDown(e: KeyboardEvent) {
    if (
      // Allow: Delete, Backspace, Tab, Escape, Enter
      [46, 8, 9, 27, 13].indexOf(e.keyCode) !== -1 ||
      (e.keyCode === 65 && e.ctrlKey === true) || // Allow: Ctrl+A
      (e.keyCode === 67 && e.ctrlKey === true) || // Allow: Ctrl+C
      (e.keyCode === 86 && e.ctrlKey === true) || // Allow: Ctrl+V
      (e.keyCode === 88 && e.ctrlKey === true) || // Allow: Ctrl+X
      (e.keyCode === 65 && e.metaKey === true) || // Cmd+A (Mac)
      (e.keyCode === 67 && e.metaKey === true) || // Cmd+C (Mac)
      (e.keyCode === 86 && e.metaKey === true) || // Cmd+V (Mac)
      (e.keyCode === 88 && e.metaKey === true) || // Cmd+X (Mac)
      (e.keyCode >= 35 && e.keyCode <= 39) // Home, End, Left, Right
    ) {
      return; // let it happen, don't do anything
    }
    // Ensure that it is a number and stop the keypress
    if (
      (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) &&
      (e.keyCode < 96 || e.keyCode > 105)
    ) {
      e.preventDefault();
    }
  }

}

上面的代码工作正常，但我知道“keyCode”已被弃用，所以我尝试使用“key" 而不是，但我得到了这个错误：

Argument of type 'string' is not assignable to parameter of type 'number'. (screenshot)

This condition will always return 'false' since the types 'string' and '65' have no overlap. (screenshot)

所以我的问题是如何解决它？

提前致谢

Answer 1

正如 Eliseo 指出的那样，我使用了这个解决方案并且效果很好

谢谢 Eliseo

当我在 angular 中使用 "key" 而不是 "keyCode" 和 "KeyboardEvent" 时出现错误

I'm getting an error when I use "key" instead of "keyCode" with "KeyboardEvent" in angular

angular-directive

angular