angular使用iosSelect插件实现城市选择

因为使用angular写一个webapp页面,里面有城市选择,为了简单一点直接使用了IOSSelect插件.

起步

• npm
  npm install iosselect

• 下载文件
  点击下载文件到项目目录中，在HTML文件中插入以下代码，并按需调整路径。
  <link rel="stylesheet" href="/static/css/iosSelect.css"> <script type="text/javascript" src="/static/js/iosSelect.js"></script>

当我们把插件文件引入后我们便可以在我们的代码中使用这个插件了,由于官方demo给的是js版本的,所以我们在angular文件中使用时需要改造一下

在组件中使用插件时首先我们需要declare(声明)一下

• declare let IosSelect: any;

这里需要注意一下declare必须放在@Component之前,否则会报错

然后我们通过ElementRef和Renderer2来进行元素的操作,不了解ElementRef和Renderer2的朋友可以查看这篇博客
angular修仙之路

我们通过一个事件调用插件中的方法

app.component.ts

import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';
import { CityService } from './city.service';

declare let IosSelect: any;
@Component({
  selector: 'app-user-add',
  templateUrl: './user-add.component.html',
  styleUrls: ['./user-add.component.scss'],
})

export class UserAddComponent implements OnInit {
  address: any;
  oneId: any;
  twoId: any;
  cities: any;


  constructor(
    private elem: ElementRef,
    private rend: Renderer2,
    public cityService: CityService
  ) {
    this.address = "北京市 北京市 东城区";
  }

  ngOnInit() {
    this.cityService.getCity()
    .then(res => {
      console.log(res);
      this.cities = res;
    })
  }


clickEvent() {
    let sccode = 
      this.elem.nativeElement.querySelector('#show_contact')
          .getAttribute('data-city-code');
    let scname = 
      this.elem.nativeElement.querySelector('#show_contact')
          .getAttribute('data-city-name');
    let oneLevelId =  
      this.elem.nativeElement.querySelector('#show_contact')
          .getAttribute('data-province-code');
    let twoLevelId = 
      this.elem.nativeElement.querySelector('#show_contact')
          .getAttribute('data-city-code');
    let threeLevelId = 
      this.elem.nativeElement.querySelector('#show_contact')
          .getAttribute('data-district-code');

    let el = this.elem; //这里需要将this作保留,否则this将指向这个对象的实例
    let self = this;
    let iosSelect = new IosSelect(3,
      [self.cities.iosProvinces, self.cities.iosCitys, self.cities.iosCountys],
      {
        title: '地址选择',
        itemHeight: 35,
        relation: [1, 1, 0, 0],
        oneLevelId: oneLevelId,
        twoLevelId: twoLevelId,
        threeLevelId: threeLevelId,
        
        callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
          self.oneId = selectOneObj.id; //这里的this指向发生了变化
          el.nativeElement.querySelector('#contact_province_code')
            .setAttribute('data-province-name', selectOneObj.value);
          self.twoId = selectTwoObj.id;
          el.nativeElement.querySelector('#contact_city_code')
            .setAttribute('data-city-name', selectTwoObj.value);
        
          el.nativeElement.querySelector('#show_contact')
            .setAttribute('data-province-code', selectOneObj.id);
          el.nativeElement.querySelector('#show_contact')
            .setAttribute('data-city-code', selectTwoObj.id);
          el.nativeElement.querySelector('#show_contact')
            .setAttribute('data-district-code', selectThreeObj.id);
          self.address = 
                selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value;
        }
      });
  }

app.component.html

<p id="select_contact" (click)="clickEvent()">
  <label>所在区域</label>
  <input type="hidden" 
         name="contact_province_code" 
         data-id="0001" 
         id="contact_province_code" 
         value="{{oneId}}" data-province-name="">
  <input type="hidden" 
         name="contact_city_code" 
         id="contact_city_code" 
         value="{{twoId}}" data-city-name="">
  <span data-city-code="110100"  //绑定的默认值
        data-province-code="110000" 
        data-district-code="110101" 
        id="show_contact">{{address}}</span>
</p>

app.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class CityService {
  constructor(public http: Http) { }

  getCity() {
    const url = 'assets/select/cityData.json';
    return this.http.get(url)
      .toPromise()
      .then(res => res.json())
      .catch(this.handleError);
  }

  public handleError(error: any) {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }
}

关于使用npm引入iosselect的一些问题

首先使用npm install --save iosselect创建文件,这里是发布时用到的包,所有不要使用npm install --save-dev iosselect来创建

然后我们导入import IosSelect from 'iosselect';注意这里没有使用{IosSelect},当一个文件导出多个对象时就需要使用{},而这里导入的是一个default对象,具体的可以看一下import和export文档,其他地方不需要改动
当angular中使用{IosSelect}引入时会报错

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_2_iosselect__.IosSelect is not a constructor
    at UserAddComponent.webpackJsonp.../../../../../src/app/store/user-add/user-add.component.ts.UserAddComponent.clickEvent (user-add.component.ts:47)

TypeError

这个时候城市选择功能是可以使用的,但是没有样式,因为我们的样式还没有导入,使用@import "~iosselect/src/iosSelect.css";导入css文件,到此我们使用npm变完成了

数据和插件文件http://pan.baidu.com/s/1cbIRFK