最近在项目重构的过程当中，发明之前用mobiscroll写的区域挑选指令在angular2中很难重用（毕竟是用typeScript）。因而就萌生了本身写一个组件的主意。
想和之前一样基于mobiscroll去写，然则发明异常消耗精神，因而某日万般无奈这下搜了一下相干的组件，不出所料已有人写了。
https://www.npmjs.com/package…
然则此组件并不相符我的请求。
我不是纯真的挑选省市区，还多是挑选省市或许省。因而参照此项目基于ionic2的picker写了一个公用组件。
详细代码以下：
AreasSelect.ts
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;
}
}areasSelect.com.html
实际上是不须要对应的template的，然则为了能和父级传参，这里建立了一个空的template
<div></div>详细用法：
在须要用到的页面挪用
test.page.html
<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>test.page.ts
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');
}
}
没有区域数据json或ts的文件能够去这里猎取
http://pan.baidu.com/s/1eRUJiXO
