angular指令-inputNumber输入框只能输入数字

1、建立一个独立模块用于作为公用指令的模块
1）生成模块

ng g m directive

2）进入指令模块目录

cd directive

3）生成一个只能输入数字的指令类

ng g d numberinput 

4）指令模块directive.module.ts代码如下

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NumberinputDirective } from './numberinput.directive';
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [NumberinputDirective],
  exports:[ // 使引用该模块的类可以使用该指令
    NumberinputDirective
  ]
})
export class DirectiveModule { }

5）指令类numberinput.directive.ts代码如下

@Directive({
  selector: 'input[numberInput]'
})
export class NumberInputDirective {
  // tslint:disable-next-line: no-input-rename
  @Input('numberInput') numberType: string;
  constructor(private el: ElementRef) {}

  @HostListener('input', ['$event.target.value'])
  onChange(value: string): void {
    if (this.numberType.length < 1) {
      this.updateIntegerValue(value);
    } else {
      this.el.nativeElement.value = value.replace(/[^\d.]/g, '');
    }
  }
  @HostListener('blur', ['$event.target.value']) onBlur(value: number): void {
    if (this.numberType.length >= 1) {
      this.updateFloatValue(value);
    }
  }
  updateIntegerValue(value: string): void {
    this.el.nativeElement.value = value.replace(/[^\d]/g, '');
  }
  updateFloatValue(floatValue: number): void {
    const value = String(floatValue);
    const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/.test(value);
    const numBegin = /^\d/.test(value);
    const numEnd = /\d$/.test(value);
    if (reg && numBegin && numEnd) {
      this.el.nativeElement.value = value;
    } else {
      this.el.nativeElement.value = 0;
    }
  }
}