一、现在我们基本了解了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
});
}
}