Javascript 为什么这个角度4指令不'；I don’我没有按预期工作

上下文：我正在尝试为输入类型number创建一个指令，该指令不允许用户在输入中键入除数字以外的任何字符，我想我不远，但该指令的行为与预期不符

预期行为：当用户键入数字时，数字会保留在输入中，但如果他键入字母，字母会自动删除，只保留数字

当前行为：在Firefox和Safari上（在Chrome上运行良好），当用户键入数字时，一切正常，但只要他键入一个字母，所有输入的内容都会被删除，即使是以前键入的数字

复制场景：我有这个案例，您可以开始在输入中键入数字，这样就可以了，然后当您键入字母时，输入被删除

代码：

import { Directive, ElementRef, Renderer2 } from '@angular/core';
import { DefaultValueAccessor } from '@angular/forms';

@Directive({
  selector: 'input[type=number]',
  host: {
    '(input)': 'onInput($event.target.value)'
  },
})

export class NumberDirective extends DefaultValueAccessor {

  constructor(renderer: Renderer2, elementRef: ElementRef) { super(renderer, elementRef, false); }

  onInput(value: any): void {
    const transformed = this.transformValue(value);
    super.writeValue(transformed);
    this.onChange(transformed);
  }

  private transformValue(value: any): any {
    return value.replace(/[^0-9|\s]+/g, '');
  }
}

问题：

import { Directive, ElementRef, Renderer2 } from '@angular/core';
import { DefaultValueAccessor } from '@angular/forms';

@Directive({
  selector: 'input[type=number]',
  host: {
    '(input)': 'onInput($event.target.value)'
  },
})

export class NumberDirective extends DefaultValueAccessor {

  constructor(renderer: Renderer2, elementRef: ElementRef) { super(renderer, elementRef, false); }

  onInput(value: any): void {
    const transformed = this.transformValue(value);
    super.writeValue(transformed);
    this.onChange(transformed);
  }

  private transformValue(value: any): any {
    return value.replace(/[^0-9|\s]+/g, '');
  }
}

我怎样才能让这个指令起作用

我的IDE正在抱怨，因为使用主机元数据不尊重，我应该使用HostListener/HostBinding装饰器。如果你帮我用指令使用HostListener，你会像我的超级英雄，因为我根本不知道如何使用HostListener

---

在你的堆栈上，所有的东西都有效。可以输入数字，但不能输入字母，不能删除任何数字。@Doomenik:你试过Firefox吗？哪个版本？我使用的是firefox mac 55.0.3 64位版本，它对我不起作用，当我键入字母时，以前的数字会被删除。我使用的是chrome，html5标签号已经不允许几乎所有的字母，除了一些字母，如

e

。是的，如果我在号码的末尾键入那个，前一个就会被删除。如果你在两者之间键入它，它将按照你的意愿工作。我正在使用内置验证器，所以我很抱歉，但在这种情况下我帮不了你。我可以告诉你，如果你在堆栈上键入一个字母作为最后一个字符，那么它不能为

nInput

函数提供正确的值。可以输入数字，但不能输入字母，不能删除任何数字。@Doomenik:你试过Firefox吗？哪个版本？我使用的是firefox mac 55.0.3 64位版本，它对我不起作用，当我键入字母时，以前的数字会被删除。我使用的是chrome，html5标签号已经不允许几乎所有的字母，除了一些字母，如

e

。是的，如果我在号码的末尾键入那个，前一个就会被删除。如果你在两者之间键入它，它将按照你的意愿工作。我正在使用内置验证器，所以我很抱歉，但在这种情况下我帮不了你。我可以告诉您，如果您键入字母作为最后一个字符，则它不会为

ònInput

函数提供正确的值