3.4.添加页面

现在我们对Ionic 2 App的布局有了一个基本的认识,继续来实现添加和导航页面的功能。

看一下src/app/app.html,在底部会看到以下代码:

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

注意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<{title: string, component: any}>;

 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这个类。这个类创建了一个Page,即Angular中的Component(组件),并且会载入Ionic的导航系统。注意因为Page是被动态载入的,所以他们不需要selector

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

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

export class HelloIonicPage {}

所有的Page都是一个类,并且关联到对应的模板文件上。看一下src/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>navigation bar的模板。当我们导航到页面时,navigation bar的按钮和页面标题将会作为整个页面动画的一部分展现出来。

模板其余的部分是标准的Ionic代码,设置了内容区域和输出我们的欢迎信息。

创建一个新页面

创建这个新页面,我们并不需要做很多配置,只需要确保设置好navigation bar要展示的标题就可以了。

看一下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: 'list.html'
})
export class ListPage {    selectedItem: any;    icons: string[];    items: Array<{title: string, note: string, icon: string}>;

    constructor(public navCtrl: NavController, public 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
        });
    }}

这个页面将会创建一个基本的列表页面,包含一些数字。

大致上这个页面跟我们之前看的HelloIonicPage非常类似。接下来我们看一下如何导航到这个新页面。

results matching ""

    No results matching ""