基本導(dǎo)航
所謂導(dǎo)航，是指從一個(gè)頁(yè)面進(jìn)入另一個(gè)頁(yè)面，也可以返回。在Ionic 2中，我們使用NavController來(lái)實(shí)現(xiàn)導(dǎo)航。下面通過(guò)一個(gè)實(shí)例來(lái)說(shuō)明：
1.新建一個(gè)空的Ionic 2項(xiàng)目navigation：
ionic start navigation blank --v2 --skip-npm
cnpm install //根據(jù)package.json，安裝依賴(lài)模塊
2.增加一個(gè)新的頁(yè)面Second，我們要做的就是從Home頁(yè)進(jìn)入到Second頁(yè):
ionic g page Second
這樣，我們可以看到在src/pages目錄下增加了一個(gè)新的目錄second，其中包括三個(gè)文件，分別是second.html、second.scss和second.ts。
3.修改src/app/app.module.ts文件，將新增加的頁(yè)面加入進(jìn)去：
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SecondPage } from '../pages/second/second'; //新增加的
@NgModule({
declarations: [
MyApp,
HomePage,
SecondPage //新增加的
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
SecondPage //新增加的
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
尤其要注意，每當(dāng)增加一個(gè)頁(yè)面時(shí)，都要修改app.module.ts文件中的三個(gè)地方：import、declarations和entryComponents。
4.修改src/pages/home目錄中的home.html文件，增加一個(gè)按鈕:
<ion-header>
<ion-navbar>
<ion-title>
導(dǎo)航演示
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button color="primary" (click)="myNavigation()">導(dǎo)航</button>
</ion-content>
5.修改src/pages/home目錄中的home.ts文件，添加按鈕單擊函數(shù):
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SecondPage } from '../second/second'; //新增加的
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) { }
myNavigation(){ //新增加的按鈕單擊函數(shù)
this.navCtrl.push(SecondPage);
}
}
這樣，我們就完成了一個(gè)最簡(jiǎn)單的頁(yè)面之間的導(dǎo)航，在home頁(yè)面單擊"導(dǎo)航"按鈕，就進(jìn)入了第二個(gè)頁(yè)面，并且有一個(gè)back按鈕，單擊它，就可以返回到home頁(yè)面。
頁(yè)面之間傳遞數(shù)據(jù)
我們通過(guò)NavParams進(jìn)行頁(yè)面之間的數(shù)據(jù)傳遞。修改上一個(gè)例子，在home頁(yè)中，添加兩個(gè)輸入框，分別用來(lái)輸入用戶(hù)名和密碼，點(diǎn)擊提交按鈕后，將輸入框中輸入的內(nèi)容傳遞給下一個(gè)頁(yè)面，并在頁(yè)面中顯示出來(lái)。
home.html代碼：
<ion-header>
<ion-navbar>
<ion-title>
傳遞數(shù)據(jù)
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label fixed>用戶(hù)名</ion-label>
<ion-input [(ngModel)]="username" type="text" value=""></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>密碼</ion-label>
<ion-input [(ngModel)]="password" type="password"></ion-input>
</ion-item>
</ion-list>
<button ion-button color="primary" (click)="ok()">提交</button>
</ion-content>
home.ts代碼：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SecondPage } from '../second/second';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
username:any;
password:any;
constructor(public navCtrl: NavController) { }
ok(){
this.navCtrl.push(SecondPage,{
username:this.username,
password:this.password
});
}
}
second.html代碼：
<ion-header>
<ion-navbar>
<ion-title>得到數(shù)據(jù)</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<strong>用戶(hù)名是：</strong>{{username}}
</ion-item>
<ion-item>
<strong>密碼是：</strong>{{password}}
</ion-item>
</ion-list>
</ion-content>
second.ts代碼：
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
selector: 'page-second',
templateUrl: 'second.html'
})
export class SecondPage {
username:any;
password:any;
constructor(public navCtrl: NavController, public navParams: NavParams) {}
ionViewDidLoad() {
this.username=this.navParams.get('username');
this.password=this.navParams.get('password');
}
}
導(dǎo)航部件
modals:模態(tài)窗口
在web開(kāi)發(fā)中，模態(tài)窗口是經(jīng)常使用的。尤其是當(dāng)用戶(hù)僅僅需要打開(kāi)一個(gè)窗口，輸入所需要的信息，然后關(guān)閉該窗口，而不需要再點(diǎn)擊返回按鈕返回到上一個(gè)頁(yè)面。
對(duì)于模態(tài)窗口，我們需要掌握的是當(dāng)窗口關(guān)閉時(shí)，如何將數(shù)據(jù)傳遞回去？這就要用到ModalController。下面用實(shí)例說(shuō)明：
1.增加一個(gè)新的頁(yè)面modal，執(zhí)行下面的命令：
ionic g page modal
這樣，我們?cè)趕rc/pages目錄下可以看到新增加了一個(gè)目錄modal，其中包括三個(gè)文件：modal.html、modal.scss和modal.ts。
2.修改app.module.ts，將modal頁(yè)面添加進(jìn)去，同樣要注意修改三個(gè)地方：import、declarations和entryComponents。
3.修改home.html，新添加一個(gè)按鈕，用來(lái)打開(kāi)modal這個(gè)模態(tài)窗口，并且從模態(tài)窗口傳遞數(shù)據(jù)進(jìn)來(lái)。
<ion-item>
<strong>模態(tài)窗口傳過(guò)來(lái)的描述信息：</strong>{{description}}
</ion-item>
......
<button ion-button color="secondary" (click)="modal()">模態(tài)</button>
......
4.修改home.ts，引入ModalController，并在構(gòu)造函數(shù)中增加對(duì)modalCtrl的定義，然后增加modal()函數(shù)：
import { NavController,ModalController } from 'ionic-angular';
......
constructor(public navCtrl: NavController,public modalCtrl:ModalController) { }
......
