Ionic2+angular4地區選擇組件

FleyX 發布于2019-08-20 18:20 / 1974人閱讀

摘要：最近在項目重構的過程中，發現之前用寫的地區選擇指令在中很難重用畢竟是用。但是此組件并不符合我的要求。我不是單純的選擇省市區，還可能是選擇省市或者省。

最近在項目重構的過程中，發現之前用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 = new EventEmitter(); // 關閉事件
    /**
     *  完成時觸發的事件
     *  返回值為obj
     *  obj = {data: object,value: string} data為對應的省市區和編碼
     * @type {EventEmitter}
     */
    @Output() done: EventEmitter = 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

具體用法：
在需要用到的頁面調用
test.page.html

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

云服務器 GPU云服務器地區選擇地區選擇api 青云主機地區選擇服務器地區選擇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84361.html

從Ionic2 beta更新到Ionic2 RC0的正確姿勢

摘要：參照更新你的文件刪除文件夾和文件參照更新文件重命名并重新定位到移動文件從到比如等等將你定義的屬性移動到文件修正你的圖片路徑例如之前是現在應該是組件內與模版相關的變量，修改關鍵字為。 ps:參照官方文檔進行整理。填了一些坑供參考：）基于Angular2的正式發布，Ionic2也進入了RC版本。但是因為結構和語法變動，使得從beta到RC不能平滑升級。官方給出了2種升級方式：1.創建...

TIGERB 2019-08-22 10:58 評論0 收藏0
Angular2 VS Angular4 深度對比：特性、性能

摘要：的特性和性能是的超集，用于幫助的開發。注解提供了連接元數據和功能的工具。通過在庫中提供基本信息可以調用函數或創建類的實例來檢查相關元數據，從而簡化了對象實例的構建。停用它會響應跳出舊控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web應用開發領域，Angular被認為是最好的開源JavaScri...

孫淑建 2019-08-20 18:37 評論0 收藏0
前端框架這么多，該如何抉擇？

摘要：在引起狀態變化的時刻，框架自動觸發臟檢查，也可以手動執行臟檢查，直接操作更新視圖。最后，說了這么多，大家在具體選型時還是要首先分析自己的需求和現狀，然后再做選擇。作為一個軟件開發者，最大的挑戰就是在不斷涌現的新技術中進行取舍，持續學習是從事這一行業的必備技能。在這個領域里，技術更新最快地又非前端莫屬了。各種框架的出現、版本的更新此起彼伏，呈現出一派欣欣向榮之景。在項目中必不可少的便...

Jackwoo 2019-08-29 15:37 評論0 收藏0
前端框架這么多，該如何抉擇？

摘要：在引起狀態變化的時刻，框架自動觸發臟檢查，也可以手動執行臟檢查，直接操作更新視圖。最后，說了這么多，大家在具體選型時還是要首先分析自己的需求和現狀，然后再做選擇。作為一個軟件開發者，最大的挑戰就是在不斷涌現的新技術中進行取舍，持續學習是從事這一行業的必備技能。在這個領域里，技術更新最快地又非前端莫屬了。各種框架的出現、版本的更新此起彼伏，呈現出一派欣欣向榮之景。在項目中必不可少的便...

lemon 2019-08-26 11:59 評論0 收藏0

發表評論

登陸后可評論

0條評論

FleyX

男|高級講師

我要關注我要私信

TA的文章

只看不敲，神也學不好C---------計算機經典書籍經驗分享

閱讀 1049·2021-11-24 09:39
云服務器有哪些優勢？如何租用云服務器？

閱讀 3578·2021-11-22 13:54
了解文件的隨機讀寫，文件類別、文件緩沖區，文件操作知識點補充（接上文）

閱讀 2542·2021-10-11 10:59
畢業設計之 -- 基于單片機的人臉識別追蹤

閱讀 773·2021-09-02 15:40
vue小說移動端閱讀器vue全家桶項目，已部署到服務器可訪問預覽

閱讀 1025·2019-08-30 15:55
PostCSS自學筆記（二）【番外篇二】

閱讀 1042·2019-08-30 13:57
少量JQuery+CSS3代碼實現輪播器 (初次寫文章，思路，文筆都不足，輕噴)

閱讀 2305·2019-08-30 13:17
vue.js實現一個會動的簡歷(包含底部導航功能，編輯功能,添加了用戶自定義寫字速度功能)

閱讀 3025·2019-08-29 18:32

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

Ionic2+angular4地區選擇組件

相關文章

**從Ionic2 beta更新到Ionic2 RC0的正確姿勢**

**Angular2 VS Angular4 深度對比：特性、性能**

前端框架這么多，該如何抉擇？

前端框架這么多，該如何抉擇？

發表評論

0條評論

FleyX

男|高級講師

TA的文章

只看不敲，神也學不好C---------計算機經典書籍經驗分享

云服務器有哪些優勢？如何租用云服務器？

了解文件的隨機讀寫，文件類別、文件緩沖區，文件操作知識點補充（接上文）

畢業設計之 -- 基于單片機的人臉識別追蹤

vue小說移動端閱讀器vue全家桶項目，已部署到服務器可訪問預覽

PostCSS自學筆記（二）【番外篇二】

少量JQuery+CSS3代碼實現輪播器 (初次寫文章，思路，文筆都不足，輕噴)

vue.js實現一個會動的簡歷(包含底部導航功能，編輯功能,添加了用戶自定義寫字速度功能)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

Ionic2+angular4地區選擇組件

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！