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

以下是一个Angular自定义指令的示例代码，用于创建一个限制只能输入数字的输入框：

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

在你的HTML模板中，只需要在输入框上添加appOnlyNumber属性即可使用这个指令：

<input type="text" appOnlyNumber />

这个指令通过监听keydown事件来处理输入，并通过e.preventDefault()阻止非数字的输入。这样就创建了一个只能输入数字的输入框。