Angular 6 numberonly 指令不起作用

Posted 2023-02-22

【中文标题】Angular 6 numberonly 指令不起作用

【英文标题】：Angular 6 numberonly directive not working

【发布时间】：2019-06-11 13:47:33

【问题描述】：

我从https://www.davebennett.tech/angular-4-input-numbers-directive/ 创建了一个指令，这样我就可以限制用户在电话号码中只输入数字。在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';
...
...

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

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

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

【问题讨论】：

尝试将您的 NumberOnlyDirective 也放入共享模块的导出中。

将此添加为您的答案。

【参考方案1】：

当您在共享模块中使用自定义指令/管道时，您还需要将其导出。

基本上在您的教程中，他创建了指令并在应用程序模块中声明了它。但是在您的示例中，您将指令放在共享模块中，因此您需要将指令放在声明括号中，但也要放在导出中。

shared.module.ts：

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

【参考方案2】：

三个快速指令调试技巧：

在指令的构造函数中添加debugger; 语句。然后您就可以确定它何时起作用并且您可以将其移除。 确保您拥有selector: '[magicFeature]' 而不是selector: 'magicFeature' 有时您需要重新启动 ng serve 以确保一切都已刷新。

【参考方案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();