时间戳

首页 > 解决方案 > 如何在 IONIC 3 中为 intl-tel-input 创建 IONIC 组件

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

问题描述

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

标签： angularionic-frameworkionic2ionic3

解决方案

我建议您使用替代ng2-tel-input，因为您尝试使用的库是编写的 Javascript ，您需要编写一个包装器，这使得某些东西难以实现。

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

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

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

第三步：导入模块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 步：让用户在 ionic 页面中输入数字

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

希望这有帮助！

推荐阅读