如何在 Angular 7 中使用输入掩码 jQuery 插件？答案

【问题标题】：How to use Input mask jQuery plugin in Angular 7?如何在 Angular 7 中使用输入掩码 jQuery 插件？
【发布时间】：2019-09-03 06:14:25
【问题描述】：

我想在我的 Angular 7 项目中实现输入掩码。我需要知道要遵循的步骤。

我正在尝试使用this 插件。

我遵循以下步骤。
第 1 步：npm install inputmask --save
第 2 步：在我的应用程序中导入为 import Inputmask from "inputmask";
而在声明 declarations: [Inputmask ]

第 3 步：在我的 component.html 中
<input data-inputmask="'mask': '[9-]AAA-999'" im-insert="true">

我遇到以下问题：
未捕获的错误：模块“AppRoutingModule”导入的意外值“Inputmask”。请添加@NgModule 注解。

如何解决？或者我可以获取示例代码或链接。

【问题讨论】：

您不应该添加 AppModule 而不是 AppRoutingModule 吗？
import Inputmask from "inputmask" 仅用于导入 ES 模块，而非 Angular 模块。导入的 ES 模块不能声明为角度组件/指令。导入 ES 模块使您可以访问 Inputmask 以在您的打字稿代码中使用，但它不会将其连接到角度模板。

【解决方案1】：

我终于找到了解决方法。

安装 Jquery 和 inputMask

npm install jquery --save npm install inputmask --save
将 jquery 和 mask js 添加到 angular-cli.json

scripts: [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/inputmask/dist/jquery.inputmask.bundle.js" ]
在您的组件中导入

import * as Inputmask from "inputmask"
在 NgOnInit 中调用它

ngOnInit() { Inputmask().mask(document.querySelectorAll("input")); }
在输入标签中添加掩码

<input data-inputmask="'mask': '99-9999999'" />

【讨论】：