前言
本文主要给大家介绍的是关于利用ionic2 + angular4实现一个地区选择组件的相关内容，为什么会有这篇文章？主要是因为最近在项目重构的过程中，发现之前用mobiscroll写的地区选择指令在angular2中很难重用（毕竟是用typescript）。于是就萌生了自己写一个组件的想法。
想和之前一样基于mobiscroll去写，但是发现非常耗费精力，于是某日万般无奈这下搜了一下相关的组件，不出所料已经有人写了。...但是此组件并不符合我的要求。我不是单纯的选择省市区，还可能是选择省市或者省。于是参照此项目基于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的文件可以去这里获取：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
如对本文有疑问， 点击进行留言回复！！
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论