如何在离子3中为INTL-TEL输入创建离子组件

Question

如何为https://github.com/jackocnr/intl-tel-input创建离子3组件？或离子3中有其他模块 我将感谢任何帮助。

Answer 1

我建议您使用替代 ng2-tel-input ，因为您尝试使用的库是书面的JavaScript，您将需要编写包装器，并且这使得很难实施。

因此，这里是使用NG2-TEL输入的解决方案

步骤1：安装库npm install ng2-tel-input --save

步骤2：导入样式@import 'intl-tel-input/build/css/intlTelInput.css';

步骤3：导入模块import {Ng2TelInputModule} from 'ng2-tel-input';

步骤4 添加ng2TelInput指令到您的文本字段

<input type="text"
  ng2TelInput
  [ng2TelInputOptions]="{initialCountry: 'in'}"
  (hasError)="hasError($event)"
  (ng2TelOutput)="getNumber($event)"
  (intlTelInputObject)="telInputObject($event)"
  (countryChange)="onCountryChange($event)" />

步骤5：获取用户输入In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In

telInputObject(obj) {
    console.log(obj);
    obj.intlTelInput('setCountry', 'in');
  }

希望这个帮助！

Answer 2

如果收到错误"无法绑定到'ng2telinputoptions'，因为它不是"输入"的已知属性。特别是对于离子。

有两种解决此问题的方法：

1. 如果您是懒惰加载组件/页面通过导入模块而不是组件：

   • 将Ng2TelInputModule添加到该组件/页的模块中的导入

2. 如果要直接在模块中导入组件/页面（不是懒惰的加载）

   • 将 Ng2TelInputModule添加到包含导入页面/组件的模块中的导入到
   • 将 Ng2TelInputModule添加到页面/组件模块的导入

例如，如果要在app.module.ts中导入声明中的组件/页面，则需要遵循步骤2。

Answer 3

我最近写了一个简单的软件包，以在我的一个项目中起诉。如果其他人在类似情况下发现它们，则只是为了将来。链接在这里：离子 - intl-tel-input