ionic3 多级联动城市选择插件 ion-multi-picker

1、效果演示

2、npm安装扩展包依赖  ion-multi-picker 组件

npm install ion-multi-picker --save

3、在app.module.ts中导入插件模块

 import { MultiPickerModule } from 'ion-multi-picker';
 @NgModule({
   declarations: [
     .....
   ],
   imports: [
     IonicModule.forRoot(MyApp),
     //Import MultiPickerModule 模块
     MultiPickerModule
   ],
   bootstrap: [IonicApp],
   entryComponents: [
     .....
   ],
   providers: []
 })
 export class AppModule {}    

4、具体实例使用如下：

（1）获取本地省市区json数据

　　

 //定义省市区数据源变量
  public cityList = {
    area:[]
 };
 //userInfo即为最终选中的省市区数据
 public userInfo = {
      province:"",
     city:"",
     district:""
 };
 // 获取本地城市列表服务
 getCityData() {
     return Observable.create(observer => {
         this.http.get("./assets/area-data.json").subscribe(res => {
             this.cityList['area'] = res;
         }, err => {
              this.handleError(err);
         })
     });
 }
 //获取选定的省市区
 public getCityArea(){
     let cityArr = document.getElementById("cities").innerText;
     cityArr = this.Validate.trimBlank(cityArr);
     if(cityArr == '省-市-区(县)'){
      this.Pop.toast("请选择所在地区");
      return false;
     }
     this.cityArr = cityArr.split("-");
     this.userInfo.province  = this.cityArr[0];
     this.userInfo.city  = this.cityArr[1];
     this.userInfo.district  = this.cityArr[2];
     return this.userInfo;
 }

5、模板渲染

 <ion-item>
     <ion-label>城市</ion-label>
     <ion-multi-picker id="cities" item-content [cancelText]="'取消'" [doneText]="'完成'" [placeholder]="userInfo.province == undefined ? '省-市-区(县)' : (userInfo.province + '-'+ userInfo.city +'-'+ userInfo.district)" [separator]="'-'" [multiPickerColumns]="cityList['area']"></ion-multi-picker>
 </ion-item>

注意：其中 

　　　[multiPickerColumns]属性用于渲染获取到的本地省市区数据源

　　[placeholder]属性用于初始化（已选中或未选中的）当前地区

　　[cancelText]属性为取消按钮

　　[cancelText]属性为完成按钮