(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