Angular 6 numberonly 指令不起作用

Question

我已经从 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';
...
...

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

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

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

Answer 1

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

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

shared.module.ts:

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