下載地址：https://github.com/hhjjj1010/ionic3-area-picker-demo.git
demo基于ionic的tabs模板，ionic start MyApp tabs。
生成地區(qū)選擇modal頁面以及ts和scss文件，ionic generate page area-modal --no-module。
--no-module：generate命令的參數(shù)，根據(jù)字面意思也能猜出來，不生成module。在實(shí)際項(xiàng)目中根據(jù)實(shí)際情況來選擇是否生成module來實(shí)現(xiàn)模塊封裝。
在demo中使用了modal來完成地區(qū)的選擇，主要是為了方便反向傳值。
viewCtrl傳值給modalCtrl屬于正向傳值，通過構(gòu)造函數(shù)即可完成。
modalCtrl傳值給viewCtrl屬于反向傳值，通過dismiss(data)完成。
//在viewCtrl 中
// viewCtrl正向傳值給modalCtrl
let modal = this.modalCtrl.create(AreaModalPage, {params: this.selectedAreaData});
modal.onDidDismiss(data => {
// viewCtrl接收到modalCtrl反向傳值的處理
if (data) {
this.selectedAreaData = data;
}
});
// 在modalCtrl中反向傳值
this.viewCtrl.dismiss(this.selectedArea);
生成provider，提供Http服務(wù)，ionic generate provider area-modal。
在demo中，地區(qū)數(shù)據(jù)并不是從遠(yuǎn)端服務(wù)器中獲取的，讀取的是存放在項(xiàng)目中的area.json文件。
在實(shí)際開發(fā)中，http.get("遠(yuǎn)端url")即可獲取遠(yuǎn)端服務(wù)器上的數(shù)據(jù)。
area.json文件存放到www目錄中才能被訪問到。以此推理，其他資源文件比如項(xiàng)目中的圖標(biāo)文件或許也該放到www目錄中去。
自定義頭部導(dǎo)航條
在modal頁面使用<ion-header>+<ion-toolbar>自定義頂部導(dǎo)航條
第一個<ion-toolbar>用于顯示頁面title和close按鈕
第二個<ion-toolbar>用于顯示已選中的地區(qū)信息
<ion-header>
<ion-toolbar>
<ion-title>選擇地區(qū)</ion-title>
<ion-buttons left>
<button ion-button (click)="dismiss()" icon-only>
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-row>
<ion-col *ngFor="let data of selectedArea; let i = index">
<button ion-button full small clear (click)="doSwitchAreaAction(i)">{{data.text}}</button>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-header>
