現(xiàn)在我們已經基本知道了Ionic2 app的布局，接下來我們來走一遍在我們的app里創(chuàng)建和導航頁面的過程。
先看看src/app/app.html, 接近底部的地方有如下內容：
<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
注意[root]屬性綁定。設置了ion-nav組件的根頁面或是第一個基本頁面。當加載ion-nav是蔽氨，rootPage變量引用的就是根頁面。
在 src/app/app.component.ts 里, MyApp 組件在它的構造器中定義了他。:
...
import {HelloIonicPage} from '../pages/hello-ionic/hello-ionic';
...
export class MyApp {
...
// make HelloIonicPage the root (or first) page
rootPage: any = HelloIonicPage;
pages: Array<{title: string, component: any}>;
constructor(
private platform: Platform,
private menu: MenuController
) {
...
}
...
}
我們可以看到rootPage設置為HelloIonicPage,因此HelloIonicPage將會是nav controller中加載的第一個頁面鹉究。讓我們來看一下宇立。
創(chuàng)建頁面
接下來我們看看導入的HelloIonicPage 。在 src/pages/hello-ionic/目錄下自赔，打開hello-ionic.ts文件妈嘹。
你可能注意到每個頁面有一個目錄。在每個目錄中還有另外兩個同名的.html 和 .scss 文件绍妨。例如润脸，在hello-ionic/里面有hello-ionic.ts, hello-ionic.html 和 hello-ionic.scss三個文件。盡管這不是必須的模式他去，但是這對組織代碼很有幫助毙驯。
下面,我們看到HelloIonicPage類。這將創(chuàng)建一個頁面,提供一個包含所有Ionic指令的Angular組件,加載使用Ionic的導航系統(tǒng)灾测。請注意,因為頁面是動態(tài)加載,他們沒有選擇器:
import {Component} from '@angular/core';
@Component({
templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {}
所有頁面都有一個類,和一個關聯(lián)的模板的編譯爆价。 我們看看 src/pages/hello-ionic/hello-ionic.html - 這個頁面的模版文件:
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Ionic</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="getting-started">
<h3>Welcome to your first Ionic app!</h3>
<p>
This starter project is our way of helping you get a functional app running in record time.
</p>
<p>
Follow along on the tutorial section of the Ionic docs!
</p>
<p>
<button primary menuToggle>Toggle Menu</button>
</p>
</ion-content>
<ion-navbar>是這個頁面的導航條模版。當我們導航到這個頁面媳搪，導航條上的按鈕和標題作為頁面的一部分一起過渡過來允坚。
余下的模版是標準的Ionic代碼設置內容區(qū)域，打印歡迎信息蛾号。
創(chuàng)建附加頁面
創(chuàng)建附加頁面稠项，我們只需要確保正確設置標題和其他我們希望導航條顯示的東西。
我們再來看看src/pages/list/list.ts里面的內容鲜结，你會發(fā)現(xiàn)定義了一個新的頁面：
import {Component} from "@angular/core";
import {NavController, NavParams} from 'ionic-angular';
import {ItemDetailsPage} from '../item-details/item-details';
@Component({
templateUrl: 'build/pages/list/list.html'
})
export class ListPage {
selectedItem: any;
icons: string[];
items: Array<{title: string, note: string, icon: string}>;
constructor(private navCtrl: NavController, navParams: NavParams) {
// If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get('item');
this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
'american-football', 'boat', 'bluetooth', 'build'];
this.items = [];
for(let i = 1; i < 11; i++) {
this.items.push({
title: 'Item ' + i,
note: 'This is item #' + i,
icon: this.icons[Math.floor(Math.random() * this.icons.length)]
});
}
}
itemTapped(event, item) {
this.navCtrl.push(ItemDetailsPage, {
item: item
});
}
}
這個頁面創(chuàng)建了一個包含多個數(shù)據(jù)項的列表頁展运。總之精刷，這個頁面和前面的HelloIonicPage 很相似拗胜。
