如何在IONIC 3中为intl-tel-input创建IONIC组件

Posted 2021-03-28

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

答案

我建议你使用替代的ng2-tel-input，因为你试图使用的库是用javascript编写的，你需要编写一个包装器，这使得很难实现。

所以这里是使用ng2-tel-input的解决方案

第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步：让用户在离子页面输入数字

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

希望这有帮助！