添加页面

一、现在我们基本了解了lonic2应用程序的布局结构，让我们来创建一个能够导航到页面程序。

看一下app/app.html，我们可以看到一行：

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

注意[root]绑定的属性，这部分基本上市ion-nav的第一个或者说根页面，当ion-nav加载时，这个组件将会引用变量rootPage成为根页面。

在app/app.ts中，MyApp这个组件在其构造函数中声明：

...
import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
...

class MyApp {
  ...
  
  // make HelloIonicPage the root (or first) page
  rootPage: any = HelloIonicPage;

    constructor(
      private platform: Platform,
      private menu: MenuController
    ) {
    ...
  }

  ...
}

我们看到rootPage被设置给了HelloIonicPage，所以HelloIonicPage将成为第一个界面在nav controller加载时。

二、创建一个页面

接下来，我们检查一下HelloIonicPage被导入了，今日app/pages/hello-ionic文件夹，打开hello-ionic.ts.。

接下来，我们可以看到HelloIonicPages这个类，这将创建一个页面--一个Angular组件，由lonic提供的，并且由ionic的导航系统加载的，因为页面是动态加载的，因此他们呢么没有选择器

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

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

所有页面都有一个类，和一个要编译的模板文件，让我们看一下app/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>是这个页面的导航栏的模板文件，当我们导航到这个页面时，导航栏中按钮和标题的过渡效果也会成为页面过渡效果的一部分。

三、创建额外的页面

让我们来看一下app/page/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; //声明selectedItem
  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
     });
  }
}