Angular Directive 自定义指令 - 限制数字输入框

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

@Directive({
  selector: '[appOnlyNumber]'
})
export class OnlyNumberDirective {

  constructor(private el: ElementRef) { }

  @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
    let e = <KeyboardEvent>event || <KeyboardEvent>window.event;
    let charCode = e.charCode || e.keyCode;
    // 允许输入数字、删除键、制表符和"回车"键
    if (
      !(charCode >= 48 && charCode <= 57) || // 0-9的数字
      !(charCode === 8) || // 删除键
      !(charCode === 9) || // 制表符
      !(charCode === 13) // 回车键
    ) {
      e.preventDefault();
    }
  }
}

<input type="text" appOnlyNumber />