(4)增長頁面

在app/app.html中,咱們看到了這樣一行代碼

<ion-nav #content [root]="rootPage"></ion-nav>

注意 [root] 屬性的綁定,它聲明瞭 ion-nav 控制的root頁面:當導航控制器被加載後, rootPage 組件中聲明的頁面將會被看成root頁面.

在 app/app.js中,根組件MyApp在它的構造器中作了如此聲明

import {App, IonicApp, Platform} from 'ionic/ionic';
import {HelloIonicPage} from './hello-ionic/hello-ionic';
import {ListPage} from './list/list';


class MyApp {  
constructor(app: IonicApp, platform: Platform) {    
   
    // set up our app
    this.app = app;    
    this.platform = platform;    
    this.initializeApp();    
   
    // set our app's pages
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage }
    ];    
    
    // make HelloIonicPage the root (or first) page
    this.rootPage = HelloIonicPage;
  }

  ...
}

此處,設置了HelloIonicPage爲nav控制器被加載時顯示的第一個頁面.

建立一個頁面

接下看,讓咱們看下引入的這個HelloIonicPage,你能夠在app/hello-ionic/文件夾下找到hello-ionic.js

這兒咱們會看到命名規則:在hello-ionic/文件夾下面有三個文件hello-ionic.js, hello-ionic.html, and hello-ionic.scss.

而後你會看到以下代碼,它定義一個了一個HelloIonicPage類而且導出.它建立了一個Angular組件--Page,而且配置好了這個組件運行所需的一切,指令.

import {Page, NavController} from 'ionic/ionic';

@Page({
  templateUrl: 'app/hello-ionic/hello-ionic.html'})
  
export class HelloIonicPage {
  constructor(nav: NavController) {
      this.nav = nav;
  }

}

 注意到,此處咱們傳入了.nva對象,而且在構造器中把它設置成了一個屬性

每個頁面中都會有一個類已經和這個類綁定的頁面模板,讓咱們來看下

這個Page綁定的hello-ionic.html

打開app/hello-ionic/hello-ionic.html

<ion-navbar *navbar>

  <a menu-toggle>
    <icon menu></icon>
  </a>
  
  <ion-title>
     Hello Ionic
  </ion-title>
  
</ion-navbar>

<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>
</ion-content>

<ion-navbar *navbar>聲明這個標籤內的數據,是給導航bar調用的 當咱們打開這個頁面的時候,導航欄內的數據將會被更新:

導航欄中的按鈕(button)數據被更新爲ion-nav-items(這裏具體指的是i?????吧,能夠本身試試,原文是ion-nav-content)

導航欄的標題(title)被更新爲 <ion-title>

其餘部分都是ionic的標準寫法,它定義了內容區域,在這裏輸出了一個歡迎信息.

建立其餘的頁面

要建立另外一個頁面,咱們只須要正確設置了導航欄上須要顯示的標題和其餘內容便可.

讓咱們看一下app/list/list.js的內容,這兒定義了一個新的頁面

import {IonicApp, Page, NavController, NavParams} from 'ionic/ionic';

@Page({
  templateUrl: 'app/list/list.html'
})

export class ListPage {
  constructor(app: IonicApp, nav: NavController, navParams: NavParams) {
      this.nav = nav;
    ...
   }
   ...
   itemTapped(event, item) {
        console.log('You selected', item.title);
   }
}

這個js文件會建立一個基本的列表頁,它包含了許多items.注意到這裏咱們定義了一itemTapped方法,這個方法會輸出你選中的item

如今讓咱們看一下這個方法是怎麼被調用的,打開app/list/list.html,咱們會看到

<ion-item *ng-for="#item of items" (click)="itemTapped($event, item)">

這將添加到列表中的每個項目,而且給每一個項目添加一個click觸發器,當這個項目被點擊,將會調用itemTapped方法--這個方法會在console中打印出對應項目的標題.

參考來自adding_pages