利用Ionic2 + angular4實(shí)現(xiàn)一個(gè)地區(qū)選擇組件

更新時(shí)間：2017年07月27日 10:29:05 作者：ermu

ionic是一個(gè)移動(dòng)端開(kāi)發(fā)框架，使用hybird技術(shù)，只要使用前端開(kāi)發(fā)技術(shù)就可以開(kāi)發(fā)出電腦端，安卓端和ios端的站點(diǎn)程序。下面這篇文章主要給大家介紹了關(guān)于利用Ionic2 + angular4實(shí)現(xiàn)一個(gè)地區(qū)選擇組件的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。

前言

本文主要給大家介紹的是關(guān)于利用Ionic2 + angular4實(shí)現(xiàn)一個(gè)地區(qū)選擇組件的相關(guān)內(nèi)容，為什么會(huì)有這篇文章？主要是因?yàn)樽罱陧?xiàng)目重構(gòu)的過(guò)程中，發(fā)現(xiàn)之前用mobiscroll寫的地區(qū)選擇指令在angular2中很難重用（畢竟是用typeScript）。于是就萌生了自己寫一個(gè)組件的想法。

想和之前一樣基于mobiscroll去寫，但是發(fā)現(xiàn)非常耗費(fèi)精力，于是某日萬(wàn)般無(wú)奈這下搜了一下相關(guān)的組件，不出所料已經(jīng)有人寫了。https://www.npmjs.com/package...但是此組件并不符合我的要求。我不是單純的選擇省市區(qū)，還可能是選擇省市或者省。于是參照此項(xiàng)目基于ionic2的picker寫了一個(gè)公用組件。下面話不多說(shuō)了，感興趣的朋友們下面來(lái)一起看看詳細(xì)的介紹：

具體代碼如下：

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; // 區(qū)列
 private pickerColumnCmps; // picker縱列數(shù)據(jù)實(shí)例
 private isOpen = false; // 是否被創(chuàng)建
 private pickerCmp; // picker 實(shí)例
 private value = ''; // 選中后的數(shù)據(jù)
 @Input() citiesData = areasList;　// 地區(qū)數(shù)據(jù)(默認(rèn)為areas.ts的數(shù)據(jù))
 @Input() cancelText = '關(guān)閉'; // 關(guān)閉按鈕文本
 @Input() doneText = '完成'; // 完成按鈕文本
 @Input() separator = ''; // 數(shù)據(jù)銜接模式
 @Input() level = 3; // 等級(jí)設(shè)置 最高為三級(jí)
 /**
 * 關(guān)閉時(shí)觸發(fā)的事件
 * 沒(méi)有值返回
 * @type {EventEmitter}
 */
 @Output() cancel: EventEmitter<any> = new EventEmitter(); // 關(guān)閉事件
 /**
 * 完成時(shí)觸發(fā)的事件
 * 返回值為obj
 * obj = {data: object,value: string} data為對(duì)應(yīng)的省市區(qū)和編碼
 * @type {EventEmitter}
 */
 @Output() done: EventEmitter<any> = new EventEmitter(); // 完成事件
 /**
 * 打開(kāi)地區(qū)選擇器
 * 基本思路
 * 1.創(chuàng)建picker
 * 2. 先把數(shù)據(jù)處理成省市區(qū)分開(kāi)的數(shù)組
 * 3. 將數(shù)據(jù)以列的形式給到picker
 * 4. 設(shè)置數(shù)據(jù)顯示樣式（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;
 });
 }

 /** 對(duì)數(shù)據(jù)進(jìn)行處理，并移交給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);
 }

 /**設(shè)置數(shù)據(jù)顯示樣式
 * @param picker
 */
 private divyColumns(picker) {
 let pickerColumns = this.picker.getColumns(); // 獲取列數(shù)據(jù)
 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';
 }
 }

 /**
 * 驗(yàn)證數(shù)據(jù)
 * @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;
 }

 /**
 * 設(shè)置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));
 }

 /**
 * 獲取當(dāng)前選擇的地區(qū)數(shù)據(jù)
 * @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

其實(shí)是不需要對(duì)應(yīng)的template的，但是為了能和父級(jí)傳參，這里創(chuàng)建了一個(gè)空的template

<div></div>

具體用法：

在需要用到的頁(yè)面調(diào)用

test.page.html

<ion-content>
 <button ion-button block icon-left color="light" (tap)="showAreasSelect()">地區(qū)選擇</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');
 } 
}

沒(méi)有地區(qū)數(shù)據(jù)json或ts的文件可以去這里獲?。?a >http://xiazai.jb51.net/201707/yuanma/regional_data(jb51.net).rar

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: