angular5/ionic实现城市三级下拉联动

1. npm安装扩展包依赖 ion-multi-picker 组件

   npm install ion-multi-picker --save
   

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

   import { MultiPickerModule } from 'ion-multi-picker';
   imports: [
   	     IonicModule.forRoot(MyApp),
   	 	  // Import MultiPickerModule 模块
   	     MultiPickerModule 
      ],
   
   

3. 从网上找一个所有省市区的json数据，在ts作为数据引入，
   新建一个ts

   import { HttpClient } from '@angular/common/http';
   import { Injectable } from '@angular/core';
   @Injectable()	
   export class CityDataProvider {
   	 public cities: any[];
   	constructor(public http: HttpClient) {
   	this.cities = [
   			/*  这里为所有城市数据 */
   			{  "options": [{
                   "text": "北京市",
                   "value": "110000"
               }...... }
           ]；
   	}
   }
   

4. 在需要用到的ts引入之前新建的json数据ts

   import { CityDataProvider } from "../../../../providers/city-data/city-data";  //这个为刚刚新建的ts数据
   export class EditAddPage {
   		//数据数组
   		public cityColumns: any[];
   		// 选中城市区
   		public citydefault: any;
   		/** 选择的省份 */
    		 public provinceChecked: string = '';
   		  /** 选择的城市 */
   	 	 public cityChecked: string = '';
   	 	 /** 选择的区域 */
   	  	public areasChecked: string = '';
   	 	 /** 编辑传入的地址 */
   	  	public defaultAddText: string = '';
   	  	public userInfo = {
   			   province: [],
   				city: [],
   			 district: []
   		};
   		constructor(public cityDataProvider: CityDataProvider,）{
   			this.cityColumns = this.cityDataProvider.cities;
   		}
   		//获取选定的省市区 
   		  public getCityArea() {
   		  // 城市选中后默认为字符串，并且获取到的是编码不是直接内容，为了把省份 城市  区域分为三个字段，所以把字符串分割为数组，在每个单独赋值
   	  	  let cities = this.citydefault.split(' '); 
   	      this.userInfo.province = this.cityColumns[0].options;
   	      this.userInfo.city = this.cityColumns[1].options;
   	      this.userInfo.district = this.cityColumns[2].options;
   			/*  循环城市数组，通过获取到的省市区编码来查询对应的文字内容 **/
   		    this.userInfo.province.map(v => {	
   		      if (v.value == cities[0]) {
   		        this.provinceChecked = v.text;  /* 省**/
   		      }
   		    })
   	  	  	this.userInfo.city.map(v => {
   		      if (v.value == cities[1]) {
   		        this.cityChecked = v.text;  /* 市 **/
   		      }
   		    })
   		    this.userInfo.district.map(v => {
   		      if (v.value == cities[2]) {
   		        this.areasChecked = v.text;  /* 区 **/
   		      }
   		    })
     }
   
   }
   

5. html中用法（样式自行修改）

   <ion-item class='add-select'>
     <ion-label>所在地区：</ion-label>
     <ion-multi-picker item-content  
     [(ngModel)]='citydefault'
     [placeholder]="defaultAddText"
     [multiPickerColumns]="cityColumns" [cancelText]="'取消'" [doneText]="'完成'">
     </ion-multi-picker>
   </ion-item>插入代码片
   

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

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

   [cancelText]属性为取消按钮

   [cancelText]属性为完成按钮