因為使用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)

這個時候城市選擇功能是可以使用的,但是沒有樣式,因為我們的樣式還沒有匯入,使用@import "~iosselect/src/iosSelect.css";匯入css檔案,到此我們使用npm變完成了