import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
...
import { CityPickerModule } from  "ionic2-city-picker"

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    CityPickerModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

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

@Injectable()
export class CityPickerService {

  constructor(public http: Http) {
    console.log('Hello CityPicker Provider');
  }

  getCitiesData(){
    return this.http.get('./assets/data/city-data.json')
      .toPromise()
      .then(response => response.json())
      .catch( err => {
        return Promise.reject(err)
      })

  }

}

import { Component } from '@angular/core';

import {NavController, NavParams} from 'ionic-angular';
import {CityPickerService} from "../../providers/city-picker";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  cityData: any[]; //城市数据
  cityName:string = '北京市-北京市-东城区'; //初始化城市名
  code:string; //城市编码
  constructor(
    public navCtrl: NavController,
    public cityPickerSev: CityPickerService,
    public navParams: NavParams
  ) {

    this.setCityPickerData();
  }

  /**
   * 获取城市数据
   */
  setCityPickerData(){
    this.cityPickerSev.getCitiesData()
      .then( data => {
        this.cityData = data;
      });
  }

  /**
   * 城市选择器被改变时触发的事件
   * @param event
   */
  cityChange(event){
    console.log(event);
    this.code = event['region'].value
  }
}