Angular 6 numberonly 指令不起作用

Question

我从 https://www.davebennett.tech/angular-4-input-numbers-directive/ 创建了一个指令，这样我就可以限制用户只能输入 phone 数字中的数字。在 src/app/app.sharerd.module.ts 文件中，我执行了以下代码来导入指令：

import { NumberOnlyDirective } from './number.directive';
declarations: [..., ..., NumberOnlyDirective], ...
export class SharedModule { }

现在，我在 /src/ 文件夹下创建了名为 modules/auth/component/.

的文件夹

在 /src/auth/ 文件夹的 auth.module.ts 下，我做了以下操作：

import { NgModule } from '@angular/core';
import { SharedModule } from '../../app/app.shared.module';
...
...

现在，在 /src/auth/component/ 下的 signup.html 中：

<input type="text" name="phone" myNumberOnly ... > ...
...

我仍然可以在文本框中输入字符/特殊字符等，但是，我没有在 console/cli 中看到任何错误。

Answer 1

当您在共享模块中使用自定义 directive/pipe 时，您还需要导出它。

基本上在您的教程中，他创建了指令并在应用程序模块中声明了它。但是在你的例子中，你把你的指令放在一个共享模块中，所以你需要把你的指令放在声明括号中，但也要放在导出中。

shared.module.ts :

@NgModule({
    /* ... */
    declarations: [YourDirective],
    exports: [YourDirective]
    /* ... */
})

Answer 2

三个快速指令调试技巧：

将 debugger; 语句放入指令的构造函数中。然后你就会确定它何时起作用，你可以将其删除。
确保你有 selector: '[magicFeature]' 而不是 selector: 'magicFeature'
有时您需要重新启动 ng serve 以确保刷新所有内容。

Answer 3

试试这个：

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

@Directive({
  selector: 'input[type=number], input[numbersOnly]'
})
export class NumbersOnlyInputDirective {

  constructor(private elRef: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(event) {
    const initalValue = this.elRef.nativeElement.value;
    this.elRef.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
    if ( initalValue !== this.elRef.nativeElement.value) {
      event.stopPropagation();
    }
  }

}

Angular 6 numberonly 指令不起作用

Angular 6 numberonly directive not working

angular-directive

angular

angular6