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]屬性為完成按鈕