angular - 想要一个 Angular2+ 中的数字指令，它只接受数字而不使用 ElementRef

Question

我在 Angular 的一个项目中工作，那里有很多文本框，我必须限制用户只接受数字，我不想在 Angular 中使用任何 Javascript/Jquery 代码，只想使用 Angular 的东西，所以我创建了一个指令但是当我部署代码时，代码构建和部署团队告诉 ElementRef 存在安全风险，还有其他方法/替代方法来完成这些。我的指令代码如下。

import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
    selector: '[myNumberOnly]'
})

export class NumberOnlyDirective {
    // Allow decimal numbers. The \. is only allowed once to occur
    private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);

    // Allow key codes for special events. Reflect :
    // Backspace, tab, end, home
    private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home' ];

    constructor(private el: ElementRef) {
    }

    @HostListener('keydown', [ '$event' ])
    onKeyDown(event: KeyboardEvent) {
        // Allow Backspace, tab, end, and home keys
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }

        // Do not use event.keycode this is deprecated.
        // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
        let current: string = this.el.nativeElement.value;
        // We need this because the current value on the DOM element
        // is not yet updated with the value from this event
        let next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
        }
    }
}

标签： angularangular2-templateelementref