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]属性为完成按钮