ionic3利用ion-multi-picker实现国际区号选择

ionic 版本V.3.20

依赖安装

npm i ion-multi-picker --save

app.module.ts

import { MultiPickerModule } from 'ion-multi-picker';

@NgModule({
  declarations: [
    MyApp,
    //...
  ],
  imports: [
   //....
    MultiPickerModule,       // <--加到这里
    IonicModule.forRoot(MyApp, {
      //.....
    }),
   ]
})

XXX.html

<ion-item>
          <ion-multi-picker item-content [(ngModel)]="number" [multiPickerColumns]="numberList" [cancelText]="'cancel'" [doneText]="'ok'"> </ion-multi-picker>
</ion-item>

XXX.ts

export class XXXPage {
  number: any = "86";
  numberList: any = [];
  numberListZh: any = [{
    "options": [
      { value: "86", text: "中国(+86)" },
      { value: "93", text: "阿富汗(+93)" },
      { value: "355", text: "阿尔巴尼亚(+355)" },
      { value: "213", text: "阿尔及尼亚(+213)" },
      { value: "376", text: "安道尔(+376)" },
      { value: "1264", text: "安圭拉岛(英)(+1264)" },
      { value: "244", text: "安哥拉(+244)" },
      { value: "1268", text: "安提瓜和巴布达(+1268)" },
      { value: "54", text: "阿根廷(+54)" },
      { value: "374", text: "亚美尼亚(+374)" },
      { value: "247", text: "阿森松(英)(+247)" },
      { value: "61", text: "澳大利亚(+61)" },
      { value: "43", text: "奥地利(+43)" },
      { value: "994", text: "阿塞拜疆(+994)" },
      { value: "1242", text: "巴哈马国(+1242)" },
      { value: "973", text: "巴林(+973)" },
      { value: "880", text: "孟加拉国(+880)" },
      { value: "1246", text: "巴巴多斯(+1246)" },
      { value: "375", text: "白俄罗斯(+375)" },
      { value: "32", text: "比利时(+32)" },
      { value: "501", text: "伯利兹(+501)" },
      { value: "229", text: "贝宁(+229)" },
      { value: "1441", text: "百慕大群岛(英)(+1441)" },
      { value: "591", text: "玻利维亚(+591)" },
      { value: "267", text: "博茨瓦纳(+267)" },
      { value: "55", text: "巴西(+55)" },
      { value: "673", text: "文莱(+673)" },
      { value: "359", text: "保加利亚(+359)" },
      { value: "226", text: "布基纳法索(+226)" },
      { value: "95", text: "缅甸(+95)" },
      { value: "257", text: "布隆迪(+257)" },
      { value: "237", text: "喀麦隆(+237)" },
      { value: "1", text: "美国/加拿大(+1)" },
      { value: "1345", text: "开曼群岛(英)(+1345)" },
      { value: "236", text: "中非(+236)" },
      { value: "235", text: "乍得(+235)" },
      { value: "56", text: "智利(+56)" },
      { value: "57", text: "哥伦比亚(+57)" },
      { value: "242", text: "刚果(+242)" },
      { value: "682", text: "科克群岛(新)(+682)" },
      { value: "506", text: "哥斯达黎加(+506)" },
      { value: "53", text: "古巴(+53)" },
      { value: "357", text: "塞浦路斯(+357)" },
      { value: "420", text: "捷克共和国(+420)" },
      { value: "45", text: "丹麦(+45)" },
      { value: "253", text: "吉布提(+253)" },
      { value: "1890", text: "多米尼加共和国(+1890)" },
      { value: "593", text: "厄瓜多尔(+593)" },
      { value: "20", text: "埃及(+20)" },
      { value: "503", text: "萨尔瓦多(+503)" },
      { value: "372", text: "爱沙尼亚(+372)" },
      { value: "251", text: "埃塞俄比亚(+251)" },
      { value: "679", text: "斐济(+679)" },
      { value: "358", text: "芬兰(+358)" },
      { value: "33", text: "法国(+33)" },
      { value: "594", text: "法属圭亚那(+594)" },
      { value: "241", text: "加蓬(+241)" },
      { value: "220", text: "冈比亚(+220)" },
      { value: "995", text: "格鲁吉亚(+995)" },
      { value: "49", text: "德国(+49)" },
      { value: "233", text: "加纳(+233)" },
      { value: "350", text: "直布罗陀(英)(+350)" },
      { value: "30", text: "希腊(+30)" },
      { value: "1809", text: "格林纳达(+1809)" },
      { value: "1671", text: "关岛 (+1671)" },
      { value: "502", text: "危地马拉(+502)" },
      { value: "224", text: "几内亚 (+224)" },
      { value: "592", text: "圭亚那 (+592)" },
      { value: "509", text: "海地(+509)" },
      { value: "504", text: "洪都拉斯(+504)" },
      { value: "852", text: "香港(+852)" },
      { value: "36", text: "匈牙利(+36)" },
      { value: "354", text: "冰岛(+354)" },
      { value: "91", text: "印度(+91)" },
      { value: "62", text: "印度尼西亚(+62)" },
      { value: "98", text: "伊朗(+98)" },
      { value: "964", text: "伊拉克(+964)" },
      { value: "353", text: "爱尔兰(+353)" },
      { value: "972", text: "以色列(+972)" },
      { value: "39", text: "意大利(+39)" },
      { value: "225", text: "科特迪瓦(+225)" },
      { value: "1876", text: "牙买加(+1876)" },
      { value: "81", text: "日本(+81)" },
      { value: "962", text: "约旦(+962)" },
      { value: "855", text: "柬埔寨(+855)" },
      { value: "327", text: "哈萨克斯坦 (+327)" },
      { value: "254", text: "肯尼亚(+254)" },
      { value: "82", text: "韩国(+82)" },
      { value: "965", text: "科威特(+965)" },
      { value: "331", text: "吉尔吉斯斯坦(+331)" },
      { value: "856", text: "老挝(+856)" },
      { value: "371", text: "拉脱维亚(+371)" },
      { value: "266", text: "黎巴嫩(+266)" },
      { value: "231", text: "利比里亚(+231)" },
      { value: "218", text: "利比亚(+218)" },
      { value: "423", text: "列支敦士登(+423)" },
      { value: "370", text: "立陶宛(+370)" },
      { value: "352", text: "卢森堡(+352)" },
      { value: "853", text: "澳门(+853)" },
      { value: "261", text: "马达加斯加(+261)" },
      { value: "265", text: "马拉维(+265)" },
      { value: "60", text: "马来西亚(+60)" },
      { value: "960", text: "马尔代夫(+960)" },
      { value: "223", text: "马里(+223)" },
      { value: "356", text: "马耳他(+356)" },
      { value: "1670", text: "马里亚纳群岛(+1670)" },
      { value: "230", text: "毛里求斯(+230)" },
      { value: "52", text: "墨西哥(+52)" },
      { value: "373", text: "摩尔多瓦共和国(+373)" },
      { value: "377", text: "摩纳哥(+377)" },
      { value: "976", text: "蒙古(+976)" },
      { value: "1664", text: "蒙特塞拉特(+1664)" },
      { value: "212", text: "摩洛哥(+212)" },
      { value: "258", text: "莫桑比克(+258)" },
      { value: "264", text: "纳米尼亚(+264)" },
      { value: "674", text: "瑙鲁(+674)" },
      { value: "977", text: "尼泊尔(+977)" },
      { value: "599", text: "荷属安的列斯(+599)" },
      { value: "31", text: "荷兰(+31)" },
      { value: "64", text: "新西兰(+64)" },
      { value: "505", text: "尼加拉瓜(+505)" },
      { value: "227", text: "尼日尔(+227)" },
      { value: "234", text: "尼日利亚(+234)" },
      { value: "850", text: "朝鲜(+850)" },
      { value: "47", text: "挪威(+47)" },
      { value: "968", text: "阿曼(+968)" },
      { value: "92", text: "巴基斯坦(+92)" },
      { value: "507", text: "巴拿马(+507)" },
      { value: "675", text: "巴布亚新几内亚(+675)" },
      { value: "595", text: "巴拉圭(+595)" },
      { value: "51", text: "秘鲁(+51)" },
      { value: "63", text: "菲律宾(+63)" },
      { value: "48", text: "波兰(+48)" },
      { value: "689", text: "法属波利尼西亚(+689)" },
      { value: "351", text: "葡萄牙(+351)" },
      { value: "1787", text: "波多黎各(+1787)" },
      { value: "974", text: "卡塔尔(+974)" },
      { value: "262", text: "留尼汪(+262)" },
      { value: "40", text: "罗马尼亚(+40)" },
      { value: "7", text: "俄罗斯(+7)" },
      { value: "1758", text: "圣卢西亚(+1758)" },
      { value: "1784", text: "圣文森特(+1784)" },
      { value: "684", text: "东萨摩亚(+684)" },
      { value: "685", text: "西萨摩亚(+685)" },
      { value: "378", text: "圣马力诺 (+378)" },
      { value: "239", text: "圣多美和普林西比(+239)" },
      { value: "966", text: "沙特阿拉伯(+966)" },
      { value: "221", text: "塞内加尔(+221)" },
      { value: "248", text: "塞舌尔(+248)" },
      { value: "232", text: "塞拉利(+232)" },
      { value: "65", text: "新加坡(+65)" },
      { value: "421", text: "斯洛伐克(+421)" },
      { value: "386", text: "斯洛文尼亚(+386)" },
      { value: "677", text: "所罗门群岛(+677)" },
      { value: "252", text: "索马里(+252)" },
      { value: "27", text: "南非(+27)" },
      { value: "34", text: "西班牙(+34)" },
      { value: "94", text: "斯里兰卡(+94)" },
      { value: "1758", text: "圣卢西亚(+1758)" },
      { value: "1784", text: "圣文森特和格林纳丁斯(+1784)" },
      { value: "249", text: "苏丹(+249)" },
      { value: "597", text: "苏里南(+597)" },
      { value: "268", text: "斯威士兰(+268)" },
      { value: "46", text: "瑞典(+46)" },
      { value: "41", text: "瑞士(+41)" },
      { value: "963", text: "叙利亚(+963)" },
      { value: "886", text: "台湾(+886)" },
      { value: "992", text: "塔吉克斯坦(+992)" },
      { value: "255", text: "坦桑尼亚(+255)" },
      { value: "66", text: "泰国(+66)" },
      { value: "228", text: "多哥(+228)" },
      { value: "676", text: "汤加(+676)" },
      { value: "1868", text: "特立尼达和多巴哥(+1868)" },
      { value: "216", text: "突尼斯(+216)" },
      { value: "90", text: "土耳其 (+90)" },
      { value: "993", text: "土库曼斯坦(+993)" },
      { value: "256", text: "乌干达(+256)" },
      { value: "380", text: "乌克兰(+380)" },
      { value: "971", text: "阿拉伯联合酋长国(+971)" },
      { value: "44", text: "英国(+44)" },
      { value: "598", text: "乌拉圭(+598)" },
      { value: "233", text: "乌兹别克斯坦(+233)" },
      { value: "58", text: "委内瑞拉(+58)" },
      { value: "84", text: "越南(+84)" },
      { value: "967", text: "也门(+967)" },
      { value: "381", text: "南斯拉夫(+381)" },
      { value: "263", text: "津巴布韦(+263)" },
      { value: "243", text: "刚果(+243)" },
      { value: "260", text: "赞比亚(+260)" }
    ]
  }];
  numberListEn: any = [{
    "options": [
      { value: "86", text: "China (+86)" },
      { value: "93", text: "Afghanistan (+93)" },
      { value: "355", text: "Albania (+355)" },
      { value: "213", text: "Algeria (+213)" },
      { value: "376", text: "Andorra (+376)" },
      { value: "1264", text: "Anguilla (+1264)" },
      { value: "244", text: "Angola (+244)" },
      { value: "1268", text: "Antigua and Barbuda (+1268)" },
      { value: "54", text: "Argentina (+54)" },
      { value: "374", text: "Armenia (+374)" },
      { value: "247", text: "Ascension (+247)" },
      { value: "61", text: "Australia (+61)" },
      { value: "43", text: "Austria (+43)" },
      { value: "994", text: "Azerbaijan (+994)" },
      { value: "1242", text: "Bahamas (+1242)" },
      { value: "973", text: "Bahrain (+973)" },
      { value: "880", text: "Bangladesh (+880)" },
      { value: "1246", text: "Barbados (+1246)" },
      { value: "375", text: "Belarus (+375)" },
      { value: "32", text: "Belgium (+32)" },
      { value: "501", text: "Belize (+501)" },
      { value: "229", text: "Benin (+229)" },
      { value: "1441", text: "Bermuda Is. (+1441)" },
      { value: "591", text: "Bolivia (+591)" },
      { value: "267", text: "Botswana (+267)" },
      { value: "55", text: "Brazil (+55)" },
      { value: "673", text: "Brunei (+673)" },
      { value: "359", text: "Bulgaria (+359)" },
      { value: "226", text: "Burkina-faso (+226)" },
      { value: "95", text: "Burma (+95)" },
      { value: "257", text: "Burundi (+257)" },
      { value: "237", text: "Cameroon (+237)" },
      { value: "1", text: "America/Canada (+1)" },
      { value: "1345", text: "Cayman Is. (+1345)" },
      { value: "236", text: "Central African Republic (+236)" },
      { value: "235", text: "Chad (+235)" },
      { value: "56", text: "Chile (+56)" },
      { value: "57", text: "Colombia (+57)" },
      { value: "242", text: "Congo (+242)" },
      { value: "682", text: "Cook Is. (+682)" },
      { value: "506", text: "Costa Rica (+506)" },
      { value: "53", text: "Cuba (+53)" },
      { value: "357", text: "Cyprus (+357)" },
      { value: "420", text: "Czech Republic (+420)" },
      { value: "45", text: "Denmark (+45)" },
      { value: "253", text: "Djibouti (+253)" },
      { value: "1890", text: "Dominica Rep. (+1890)" },
      { value: "593", text: "Ecuador (+593)" },
      { value: "20", text: "Egypt (+20)" },
      { value: "503", text: "EI Salvador (+503)" },
      { value: "372", text: "Estonia (+372)" },
      { value: "251", text: "Ethiopia (+251)" },
      { value: "679", text: "Fiji (+679)" },
      { value: "358", text: "Finland (+358)" },
      { value: "33", text: "France (+33)" },
      { value: "594", text: "French Guiana (+594)" },
      { value: "241", text: "Gabon (+241)" },
      { value: "220", text: "Gambia (+220)" },
      { value: "995", text: "Georgia (+995)" },
      { value: "49", text: "Germany (+49)" },
      { value: "233", text: "Ghana (+233)" },
      { value: "350", text: "Gibraltar (+350)" },
      { value: "30", text: "Greece (+30)" },
      { value: "1809", text: "Grenada (+1809)" },
      { value: "1671", text: "Guam (+1671)" },
      { value: "502", text: "Guatemala (+502)" },
      { value: "224", text: "Guinea (+224)" },
      { value: "592", text: "Guyana (+592)" },
      { value: "509", text: "Haiti (+509)" },
      { value: "504", text: "Honduras (+504)" },
      { value: "852", text: "Hong Kong (+852)" },
      { value: "36", text: "Hungary (+36)" },
      { value: "354", text: "Iceland (+354)" },
      { value: "91", text: "India (+91)" },
      { value: "62", text: "Indonesia (+62)" },
      { value: "98", text: "Iran (+98)" },
      { value: "964", text: "Iraq (+964)" },
      { value: "353", text: "Ireland (+353)" },
      { value: "972", text: "Israel (+972)" },
      { value: "39", text: "Italy (+39)" },
      { value: "225", text: "Ivory Coast (+225)" },
      { value: "1876", text: "Jamaica (+1876)" },
      { value: "81", text: "Japan (+81)" },
      { value: "962", text: "Jordan (+962)" },
      { value: "855", text: "Kampuchea (Cambodia) (+855)" },
      { value: "327", text: "Kazakstan (+327)" },
      { value: "254", text: "Kenya (+254)" },
      { value: "82", text: "Korea (+82)" },
      { value: "965", text: "Kuwait (+965)" },
      { value: "331", text: "Kyrgyzstan (+331)" },
      { value: "856", text: "Laos (+856)" },
      { value: "371", text: "Latvia (+371)" },
      { value: "266", text: "Lesotho (+266)" },
      { value: "231", text: "Liberia (+231)" },
      { value: "218", text: "Libya (+218)" },
      { value: "423", text: "Liechtenstein (+423)" },
      { value: "370", text: "Lithuania (+370)" },
      { value: "352", text: "Luxembourg (+352)" },
      { value: "853", text: "Macao (+853)" },
      { value: "261", text: "Madagascar (+261)" },
      { value: "265", text: "Malawi (+265)" },
      { value: "60", text: "Malaysia (+60)" },
      { value: "960", text: "Maldives (+960)" },
      { value: "223", text: "Mali (+223)" },
      { value: "356", text: "Malta (+356)" },
      { value: "1670", text: "Mariana Is. (+1670)" },
      { value: "230", text: "Mauritius (+230)" },
      { value: "52", text: "Mexico (+52)" },
      { value: "373", text: "Republic of Moldova (+373)" },
      { value: "377", text: "Monaco (+377)" },
      { value: "976", text: "Mongolia (+976)" },
      { value: "1664", text: "Montserrat Is (+1664)" },
      { value: "212", text: "Morocco (+212)" },
      { value: "258", text: "Mozambique (+258)" },
      { value: "264", text: "Namibia (+264)" },
      { value: "674", text: "Nauru (+674)" },
      { value: "977", text: "Nepal (+977)" },
      { value: "599", text: "Netheriands Antilles (+599)" },
      { value: "31", text: "Netherlands (+31)" },
      { value: "64", text: "New Zealand (+64)" },
      { value: "505", text: "Nicaragua (+505)" },
      { value: "227", text: "Niger (+227)" },
      { value: "234", text: "Nigeria (+234)" },
      { value: "850", text: "North Korea (+850)" },
      { value: "47", text: "Norway (+47)" },
      { value: "968", text: "Oman (+968)" },
      { value: "92", text: "Pakistan (+92)" },
      { value: "507", text: "Panama (+507)" },
      { value: "675", text: "Papua New Cuinea (+675)" },
      { value: "595", text: "Paraguay (+595)" },
      { value: "51", text: "Peru (+51)" },
      { value: "63", text: "Philippines (+63)" },
      { value: "48", text: "Poland (+48)" },
      { value: "689", text: "French Polynesia (+689)" },
      { value: "351", text: "Portugal (+351)" },
      { value: "1787", text: "Puerto Rico (+1787)" },
      { value: "974", text: "Qatar (+974)" },
      { value: "262", text: "Reunion (+262)" },
      { value: "40", text: "Romania (+40)" },
      { value: "7", text: "Russia (+7)" },
      { value: "1758", text: "Saint Lueia (+1758)" },
      { value: "1784", text: "Saint Vincent (+1784)" },
      { value: "684", text: "Samoa Eastern (+684)" },
      { value: "685", text: "Samoa Western (+685)" },
      { value: "378", text: "San Marino (+378)" },
      { value: "239", text: "Sao Tome and Principe (+239)" },
      { value: "966", text: "Saudi Arabia (+966)" },
      { value: "221", text: "Senegal (+221)" },
      { value: "248", text: "Seychelles (+248)" },
      { value: "232", text: "Sierra Leone (+232)" },
      { value: "65", text: "Singapore (+65)" },
      { value: "421", text: "Slovakia (+421)" },
      { value: "386", text: "Slovenia (+386)" },
      { value: "677", text: "Solomon Is (+677)" },
      { value: "252", text: "Somali (+252)" },
      { value: "27", text: "South Africa (+27)" },
      { value: "34", text: "Spain (+34)" },
      { value: "94", text: "Sri Lanka (+94)" },
      { value: "1758", text: "St.Lucia (+1758)" },
      { value: "1784", text: "St.Vincent (+1784)" },
      { value: "249", text: "Sudan (+249)" },
      { value: "597", text: "Suriname (+597)" },
      { value: "268", text: "Swaziland (+268)" },
      { value: "46", text: "Sweden (+46)" },
      { value: "41", text: "Switzerland (+41)" },
      { value: "963", text: "Syria (+963)" },
      { value: "886", text: "Taiwan (+886)" },
      { value: "992", text: "Tajikstan (+992)" },
      { value: "255", text: "Tanzania (+255)" },
      { value: "66", text: "Thailand (+66)" },
      { value: "228", text: "Togo (+228)" },
      { value: "676", text: "Tonga (+676)" },
      { value: "1868", text: "Trinidad and Tobago (+1868)" },
      { value: "216", text: "Tunisia (+216)" },
      { value: "90", text: "Turkey (+90)" },
      { value: "993", text: "Turkmenistan (+993)" },
      { value: "256", text: "Uganda (+256)" },
      { value: "380", text: "Ukraine (+380)" },
      { value: "971", text: "United Arab Emirates (+971)" },
      { value: "44", text: "United Kingdom (+44)" },
      { value: "598", text: "Uruguay (+598)" },
      { value: "233", text: "Uzbekistan (+233)" },
      { value: "58", text: "Venezuela (+58)" },
      { value: "84", text: "Vietnam (+84)" },
      { value: "967", text: "Yemen (+967)" },
      { value: "381", text: "Yugoslavia (+381)" },
      { value: "263", text: "Zimbabwe (+263)" },
      { value: "243", text: "Zaire (+243)" },
      { value: "260", text: "Zambia (+260)" }
    ]
  }];
  constructor(
    private app: App,
    public navCtrl: NavController,
    public navParams: NavParams,
  ) {
    this.numberList = this.numberListZh;//中文项目引用
   // this.numberList = this.numberListEn;//英文项目引用
  }

坑！！！
如果页面为子页面会报错
Can’t bind to ‘multiPickerColumns’ since it isn’t a known property of ‘ion-multi-picker’.

解决办法
在XXX.module.ts里面在导入一次

import { MultiPickerModule } from 'ion-multi-picker';
@NgModule({
  declarations: [
    //...
  ],
  exports: [
		//....
  ],
  imports: [
    //...
    MultiPickerModule,      // <--加到这里
    //...,
  ],
})
export class XXXPageModule { }