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

分类：JavaScript作者：佚名

前言

本文主要给大家介绍的是关于利用Ionic2 + angular4实现一个地区选择组件的相关内容，为什么会有这篇文章？主要是因为最近在项目重构的过程中，发现之前用mobiscroll写的地区选择指令在angular2中很难重用（毕竟是用typeScript）。于是就萌生了自己写一个组件的想法。

想和之前一样基于mobiscroll去写，但是发现非常耗费精力，于是某日万般无奈这下搜了一下相关的组件，不出所料已经有人写了。...但是此组件并不符合我的要求。我不是单纯的选择省市区，还可能是选择省市或者省。于是参照此项目基于ionic2的picker写了一个公用组件。下面话不多说了，感兴趣的朋友们下面来一起看看详细的介绍：

具体代码如下：

AreasSelect.ts

@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 = new EventEmitter(); // 关闭事件
    /**
  • 完成时触发的事件
  • 返回值为obj
  • obj = {data: object,value: string} data为对应的省市区和编码
  • @type {EventEmitter}
    */
    @Output() done: EventEmitter = new EventEmitter(); // 完成事件
    /**
  • 打开地区选择器
  • 基本思路
  • 1.创建picker
    1. 先把数据处理成省市区分开的数组
    1. 将数据以列的形式给到picker
    1. 设置数据显示样式（picker）
    1. 生成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,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,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,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,disabled: false};
    });
    if (this.pickerColumnCmps && regionCol.options.length > 0) {
    setTimeout(function () {
    return _this.pickerColumnCmps[2].setSelected(0,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

具体用法：

在需要用到的页面调用

test.page.html

test.page.ts

@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的文件可以去这里获取：

总结

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

angularangular4ionicionic2ionic实例

相关推荐

哪些JavaScript IDE最好用？
阅读本文之前，分享大家一张图片，看图会发现JavaScript开发需求最高，占比达到42.84%，因此掌握JavaScript语言好工作就不愁啦，工欲善其事必先利其器，那么选择IDE来开发是至关重要的，本文指出常用的几款JavaScript IDE，分析其优缺点，如有不完善的请大家补充
异步编程之Javascript Promises 规范介绍
Promises是一种关于异步编程的规范，目的是将异步处理对象和处理规则进行规范化，为异步编程提供统一接口。本文简要的介绍了Promises的基础知识，希望我们我们能够更好的使用Promises，更轻松的编写代码。
超越Web，Javascript在物联网的应用
引子 Patrick Catanzariti 是一名Web开发工程师，最近他在 sitepoint 发表了《JavaScript Beyond the Web in 2014》，介绍了JavaScript在物联网中的应用，非常有意思。做为JavaScript的爱好者和从业者，我在这里把它翻译了，以飨
JavaScript 常用功能总结
小编吐血整理加上翻译，太辛苦了~求赞！ 本文主要总结了JavaScript 常用功能总结，如一些常用的JS 对象，基本数据结构，功能函数等，还有一些常用的设计模式。 目录： 众所周知，JavaScript是动态的面向对象的编程语言，能够实现以下效果： 1. 丰富Web 网页功能 2. 丰富Web界面
微软Edge 内嵌的JavaScript 引擎即将开源
微软于今日（2015年12月10日）宣布即将开源Chakra核心控件，并改名为“ChakraCore”,该控件包含所有Edge JavaScript 引擎的所有核心功能。ChakraCore 将于下月发布在GitHub中。 Chakra提供了顶级的JavaScript处理功能，并具有非常强大的性能优
1000多个项目中的十大JavaScript错误以及如何避免
通过统计数据库中的1000多个项目，我们发现在 JavaScript 中最常出现的错误有10个。本文会向大家介绍这些错误发生的原因以及如何防止。
TypeScript VS JavaScript 深度对比
TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言，我们已经熟知 TypeScript 是 JavaScript 的一个超集，但是 TypeScript 与 JavaScript 之间又有什么样的区别呢？在选择开发语言时，又该如何抉择呢？
2017年 JavaScript 框架回顾 -- 后端框架
本文是2017年 JavaScript 框架回顾系列的最后的一篇文章，主要介绍 JavaScript 的后端框架情况。
JavaScript 开发人员需要知道的简写技巧
本文来源于多年的 JavaScript 编码技术经验，适合所有正在使用 JavaScript 编程的开发人员阅读。本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。
前端开发者常用的9个JavaScript图表库
对于前端开发人员来说，如果能够掌握交互式网页中的数据可视化技术，则是一项很棒的技能。当然，通过一些 JavaScript 的图表库也会使前端的数据可视化变得更加容易。
顶级的JavaScript框架、库、工具及其使用
几乎每隔一个星期，就有一个新的 JavaScript 库席卷网络社区！Web 社区日益活跃、多样，并在多个领域快速成长。想要研究每一个重要的 JavaScript 框架和库，是个不可能完成的任务。接下来，我会分享一些前端开发的最著名和最有影响力的框架和库。下面，就让我们一起来看看，顶级的 JavaS
一张图告诉你最流行的 7 个 JavaScript框架特点
AngularJ.js 由google开发，2009年首次发布 很流行的前端框架 使用Angular.js创建第一个UI，成本很低 对于团队来说，AngularJ.js有许多很棒的工具可用 很适合创建一个快速、混合型复杂的解决方案 比起React，更合适于创建小型企业级应用 由Google负责维护基
1分钟选好最合适你的JavaScript框架
Javascript框架（以下简称框架）也被称为Javascript库，是一组包含丰富功能和函数的JavaScript代码集，能够帮助开发者快速完成Web设计和开发工作。随着Web社区的越发活跃，新的框架也层出不穷，目前流行的有：Angular、React、Vue.js和Knockout等。 面对如
2017年 JavaScript 框架回顾 -- 前端框架
对于 JavaScript 社区来说，npm 的主要功能之一就是帮助开发者发掘所需的 npm Registry 中的库和框架。npm 强大的搜索功能能够帮助找到一组相关的软件包，同时其内置的的文档和使用统计信息，可以帮助开发者决定使用哪一种软件包。
SpreadJS使用进阶指南
前言 SpreadJS作为一款性能出众的纯前端电子表格控件，自2015年发布以来，已经被广泛应用于各领域“在线Excel”数据管理项目中。NPM，作为管理Node.js库最有力的手段，解决了很多NodeJS代码部署的问题。 如今，为让您更方便的使用产品和更好地管理项目中的SpreadJS代码，我们已
2017年 JavaScript 框架回顾 -- React生态系统
前一篇文章中，我们介绍了2017年 JavaScript 框架的整体情况。我们也了解到在众多的前端框架中，目前最为庞大又在快速增长的当属React了，本文就来重点介绍React的生态系统。
ES2017异步函数现已正式可用
ES2017标准已经于2017年6月份正式定稿了，并广泛支持最新的特性：异步函数。如果你曾经被异步JavaScript的逻辑困扰，这么新函数正是为你设计的。
Top 10 JavaScript编辑器，你在用哪个？
本文将会讨论10个优秀的支持JavaScript，HTML5和CSS开发，并且可以使用Markdown进行文档编写的文本编辑器。
JavaScript中的内存泄漏以及如何处理
随着现在的编程语言功能越来越成熟、复杂，内存管理也容易被大家忽略。本文将会讨论JavaScript中的内存泄漏以及如何处理，方便大家在使用JavaScript编码时，更好的应对内存泄漏带来的问题。
JavaScript 性能优化技巧分享
JavaScript 作为当前最为常见的直译式脚本语言，已经广泛应用于 Web 应用开发中。为了提高Web应用的性能，从 JavaScript 的性能优化方向入手，会是一个很好的选择。本文从加载、上下文、解析、编译、执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧，以便让更多的前端开
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot