angular 用指令实现一个文本框只能输入数字

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代码如下：

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

@Directive({
  selector: '[att-numberonly]'
})
export class NumberinputDirective {

  constructor(element:ElementRef) {
  }

   @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // 允许全选: Ctrl+A 
        (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
        // 允许复制: Ctrl+C
        (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
        // 允许粘贴: Ctrl+V
        (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
        // 允许剪切: Ctrl+X
        (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
        // 允许: home（头）, end（尾）, left（左移）, right（右移）
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          // let it happen, don't do anything
          return;
        }
        // 确保数字以外的案件被拒绝执行默认动作
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
      
  }

}

6）指令的适应

<1>使用模块引入该指令模块

@NgModule({
  imports: [
    CommonModule,
    DirectiveModule
  ]

<2>文本框中引入该指令属性

<nz-input formControlName="sdrugprice" att-numberonly [nzSize]="'large'" [nzPlaceHolder]="'零售价格（元）'"></nz-input>

★ 学习本文需要掌握angular 相关知识，后续将会陆续写一些angular入手到提高的文章。