利用Ionic2 + angular4实现一个地区选择组件

前言

本文主要给大家介绍的是关于利用Ionic2 + angular4实现一个地区选择组件的相关内容，为什么会有这篇文章？主要是因为最近在项目重构的过程中，发现之前用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://xiazai./201707/yuanma/regional_data().rar

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# angularjs  # ionic实例  # ionic2  # angular4  # ionic  # angular  # 解决ionic和angular上拉加载的问题  # Ionic + Angular.js实现验证码倒计时功能的方法  # Ionic + Angular.js实现图片轮播的方法示例  # AngularJS之ionic 框架下实现 Localstorage本地存储  # ionic+AngularJs实现获取验证码倒计时按钮  # Ionic+AngularJS实现登录和注册带验证功能  # angular+ionic 的app上拉加载更新数据实现方法  # angular+ionic返回上一页并刷新页面  # 写了  # 这篇文章  # 的是  # 是因为  # 相关内容  # 很难  # 不需要  # 说了  # 万般无奈  # 不多  # 感兴趣  # 朋友们  # 给大家  # 数据处理  # 这下  # 谢谢大家  # 先把  # 值为  # 还可能  # 过程中 

相关文章： c++怎么实现高并发下的无锁队列_c++ std::atomic原子变量与CAS操作【详解】  建站主机功能解析：服务器选择与快速搭建指南  宝塔新建站点报错如何解决？  网站制作费用多少钱,一个网站的运营，需要哪些费用？  已有域名如何快速搭建专属网站？  建站之星如何实现PC+手机+微信网站五合一建站？  教程网站设计制作软件,怎么创建自己的一个网站？  北京专业网站制作设计师招聘,北京白云观官方网站？  如何在景安云服务器上绑定域名并配置虚拟主机？  如何在腾讯云免费申请建站？  制作宣传网站的软件,小红书可以宣传网站吗？  企业宣传片制作网站有哪些,传媒公司怎么找企业宣传片项目？  建站主机选购指南与交易推荐：核心配置解析  如何选择高效稳定的ISP建站解决方案？  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  公司网站建设制作费用,想建设一个属于自己的企业网站，该如何去做？  山东网站制作公司有哪些,山东大源集团官网？  北京的网站制作公司有哪些,哪个视频网站最好？  北京网站制作公司哪家好一点,北京租房网站有哪些？  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  小捣蛋自助建站系统：数据分析与安全设置双核驱动网站优化  高防服务器租用如何选择配置与防御等级？  香港服务器如何优化才能显著提升网站加载速度？  专业网站制作企业网站,如何制作一个企业网站，建设网站的基本步骤有哪些？  一键网站制作软件,义乌购一件代发流程？  大型企业网站制作流程,做网站需要注册公司吗？  Python路径拼接规范_跨平台处理说明【指导】  如何在阿里云虚拟主机上快速搭建个人网站？  建站之星后台密码遗忘或太弱？如何重置与强化？  香港服务器建站指南：免备案优势与SEO优化技巧全解析  制作网站的软件下载免费,今日头条开宝箱老是需要下载怎么回事？  常州企业网站制作公司,全国继续教育网怎么登录？  宝塔面板创建网站无法访问？如何快速排查修复？  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  建站主机与服务器功能差异如何区分？  ppt制作免费网站有哪些,ppt模板免费下载网站？  网站建设制作、微信公众号,公明人民医院怎么在网上预约？  浅析上传头像示例及其注意事项  如何快速辨别茅台真假？关键步骤解析  如何快速搭建支持数据库操作的智能建站平台？  定制建站是什么？如何实现个性化需求？  网站app免费制作软件,能免费看各大网站视频的手机app？  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  如何快速搭建高效WAP手机网站？  如何快速配置高效服务器建站软件？  如何选择适合PHP云建站的开源框架？  电商网站制作公司有哪些,1688网是什么意思？  如何做网站制作流程,*游戏网站怎么搭建？  网站制作软件有哪些,制图软件有哪些？