現在我們已經基本知道了Ionic2 app的佈局，接下來我們來走一遍在我們的app裡建立和導航頁面的過程。

先看看src/app/app.html, 接近底部的地方有如下內容：

注意[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;    constructor(
      private platform: Platform,
      private menu: MenuController
    ) {
    ...
  }

  ...
}

我們可以看到rootPage設定為HelloIonicPage,因此HelloIonicPage將會是nav controller中載入的第一個頁面。讓我們來看一下。

建立頁面

接下來我們看看匯入的HelloIonicPage 。在 src/pages/hello-ionic/目錄下，開啟hello-ionic.ts檔案。

你可能注意到每個頁面有一個目錄。在每個目錄中還有另外兩個同名的.html 和 .scss 檔案。例如，在hello-ionic/裡面有hello-ionic.ts, hello-ionic.html 和 hello-ionic.scss三個檔案。儘管這不是必須的模式，但是這對組織程式碼很有幫助。

下面,我們看到HelloIonicPage類。這將建立一個頁面,提供一個包含所有Ionic指令的Angular元件,載入使用Ionic的導航系統。請注意,因為頁面是動態載入,他們沒有選擇器:

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

@Component({  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'})export class HelloIonicPage {}

所有頁面都有一個類,和一個關聯的模板的編譯。 我們看看 src/pages/hello-ionic/hello-ionic.html - 這個頁面的模版檔案:

  
    
      
    
    Hello Ionic
  

  
Welcome to your first Ionic app!

  

    This starter project is our way of helping you get a functional app running in record time.  
  

    Follow along on the tutorial section of the Ionic docs!  
  

    Toggle Menu
  

是這個頁面的導航條模版。當我們導航到這個頁面，導航條上的按鈕和標題作為頁面的一部分一起過渡過來。
餘下的模版是標準的Ionic程式碼設定內容區域，列印歡迎資訊。

建立附加頁面

建立附加頁面，我們只需要確保正確設定標題和其他我們希望導航條顯示的東西。
我們再來看看src/pages/list/list.ts裡面的內容，你會發現定義了一個新的頁面：

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;  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 
這個頁面建立了一個包含多個資料項的列表頁。總之，這個頁面和前面的HelloIonicPage 很相似。


作者：孫亖
連結：