import {PickerController} from "ionic-angular";import {Component, EventEmitter, Output, Input} from "@angular/core";import {areasList} from "../../datasource/areas";@Component({ selector: 'areas-select', templateUrl: 'areasSelect.com.html',})export class AreasSelect { constructor(protected Picker: PickerController) { } private picker; private provinceCol = 0; // 省列 private cityCol = 0; // 市列 private regionCol = 0; // 區列 private pickerColumnCmps; // picker縱列數據實例 private isOpen = false; // 是否被創建 private pickerCmp; // picker 實例 private value = ''; // 選中后的數據 @Input() citiesData = areasList;　// 地區數據(默認為areas.ts的數據) @Input() cancelText = '關閉'; // 關閉按鈕文本 @Input() doneText = '完成'; // 完成按鈕文本 @Input() separator = ''; // 數據銜接模式 @Input() level = 3; // 等級設置 最高為三級 /** * 關閉時觸發的事件 * 沒有值返回 * @type {EventEmitter} */ @Output() cancel: EventEmitter<any> = new EventEmitter(); // 關閉事件 /** * 完成時觸發的事件 * 返回值為obj * obj = {data: object,value: string} data為對應的省市區和編碼 * @type {EventEmitter} */ @Output() done: EventEmitter<any> = new EventEmitter(); // 完成事件 /** * 打開地區選擇器 * 基本思路 * 1.創建picker * 2. 先把數據處理成省市區分開的數組 * 3. 將數據以列的形式給到picker * 4. 設置數據顯示樣式（picker） * 5. 生成picker */ private open() { let pickerOptions = { buttons: [ { text: this.cancelText, role: 'cancel', handler:() => { this.cancel.emit(null); } }, { text: this.doneText, handler: (data) =>{ this.onChange(data); this.done.emit({ data: data, value: this.value }); } } ] }; this.picker = this.Picker.create(pickerOptions); this.generate();// 加載 this.validate(this.picker); // 渲染 this.picker.ionChange.subscribe(() => { this.validate(this.picker); }); // 生成 this.picker.present(pickerOptions).then(() => { this.pickerCmp = this.picker.instance; this.pickerColumnCmps = this.pickerCmp._cols.toArray(); this.pickerColumnCmps.forEach(function (col) { return col.lastIndex = -1; }); }); this.isOpen = true; this.picker.onDidDismiss(function () { this.isOpen = false; }); } /** 對數據進行處理，并移交給picker * */ private generate() { let values = this.value.toString().split(this.separator); // Add province data to picker let provinceCol = { name: 'province', options: this.citiesData.map(function (province) { return {text: province.name, value: province.code, disabled: false}; }), selectedIndex: 0 }; let provinceIndex = this.citiesData.findIndex(function (option) { return option.name == values[0]; }); provinceIndex = provinceIndex === -1 ? 0 : provinceIndex; provinceCol.selectedIndex = provinceIndex; this.picker.addColumn(provinceCol); // Add city data to picker let cityColData = this.citiesData[provinceCol.selectedIndex].children; let cityCol; if (this.level >= 2) { cityCol = { name: 'city', options: cityColData.map(function (city) { return {text: city.name, value: city.code, disabled: false}; }), selectedIndex: 0 }; let cityIndex = cityColData.findIndex(function (option) { return option.name == values[1]; }); cityIndex = cityIndex === -1 ? 0 : cityIndex; cityCol.selectedIndex = cityIndex; this.picker.addColumn(cityCol); } // Add region data to picker let regionData, regionCol; if (this.level === 3) { regionData = this.citiesData[provinceCol.selectedIndex].children[cityCol.selectedIndex].children; regionCol = { name: 'region', options: regionData.map(function (city) { return {text: city.name, value: city.code, disabled: false}; }), selectedIndex: 0 }; let regionIndex = regionData.findIndex(function (option) { return option.name == values[2]; }); regionIndex = regionIndex === -1 ? 0 : regionIndex; regionCol.selectedIndex = regionIndex; this.picker.addColumn(regionCol); } this.divyColumns(this.picker); } /**設置數據顯示樣式 * @param picker */ private divyColumns(picker) { let pickerColumns = this.picker.getColumns(); // 獲取列數據 let columns = []; pickerColumns.forEach(function (col, i) { columns.push(0); col.options.forEach(function (opt) { if (opt && opt.text && opt.text.length > columns[i]) { columns[i] = opt.text.length; } }); }); if (columns.length === 2) { let width = Math.max(columns[0], columns[1]); pickerColumns[0].align = 'right'; pickerColumns[1].align = 'left'; pickerColumns[0].optionsWidth = pickerColumns[1].optionsWidth = width * 17 + "px"; } else if (columns.length === 3) { let width = Math.max(columns[0], columns[2]); pickerColumns[0].align = 'right'; pickerColumns[1].columnWidth = columns[1] * 33 + "px"; pickerColumns[0].optionsWidth = pickerColumns[2].optionsWidth = width * 17 + "px"; pickerColumns[2].align = 'left'; } } /** * 驗證數據 * @param picker */ private validate(picker) { let _this = this; let columns = picker.getColumns(); let provinceCol = columns[0]; let cityCol = columns[1]; let regionCol = columns[2]; if (cityCol && this.provinceCol != provinceCol.selectedIndex) { cityCol.selectedIndex = 0; let cityColData = this.citiesData[provinceCol.selectedIndex].children; cityCol.options = cityColData.map(function (city) { return {text: city.name, value: city.code, disabled: false}; }); if (this.pickerColumnCmps && cityCol.options.length > 0) { setTimeout(function () { return _this.pickerColumnCmps[1].setSelected(0, 100); }, 0); } } if (regionCol && (this.cityCol != cityCol.selectedIndex || this.provinceCol != provinceCol.selectedIndex)) { let regionData = this.citiesData[provinceCol.selectedIndex].children[cityCol.selectedIndex].children; regionCol.selectedIndex = 0; regionCol.options = regionData.map(function (city) { return {text: city.name, value: city.code, disabled: false}; }); if (this.pickerColumnCmps && regionCol.options.length > 0) { setTimeout(function () { return _this.pickerColumnCmps[2].setSelected(0, 100); }, 0); } } this.provinceCol = provinceCol.selectedIndex; this.cityCol = cityCol ? cityCol.selectedIndex : 0; this.regionCol = regionCol ? regionCol.selectedIndex : 0; } /** * 設置value * @param newData */ private setValue(newData) { if (newData === null || newData === undefined) { this.value = ''; } else { this.value = newData; } } /** * 獲取value值 * @returns {string} */ private getValue() { return this.value; } /** * 改變value值的顯示 * @param val */ private onChange(val) { this.setValue(this.getString(val)); } /** * 獲取當前選擇的地區數據 * @param newData * @returns {string} */ private getString(newData) { if (newData['city']) { if (newData['region']) { return "" + newData['province'].text + this.separator + (newData['city'].text || '') + this.separator + (newData['region'].text || ''); } return "" + newData['province'].text + this.separator + (newData['city'].text || ''); } return "" + newData['province'].text; }}

<div></div>

<ion-content> <button ion-button block icon-left color="light" (tap)="showAreasSelect()">地區選擇</button></ion-content><areas-select #areasSelect [level]="3" (cancel)="closeSelect()" (done)="done($event)"></areas-select>

import {Component, ElementRef, Injector, ViewChild} from "@angular/core";import {BasePage} from "../base.page";@Component({ templateUrl: 'test.page.html', styles: []})export class TestPage extends BasePage { constructor(protected rt: ElementRef, protected ij: Injector) { super(rt, ij); } @ViewChild('areasSelect') areasSelect; showAreasSelect() { this.areasSelect.open(); } done(data) { this.showAlert(JSON.stringify(data)); } closeSelect() { this.showAlert('you click close'); } }