添加页面

现在我们对Ionic 2应用程序的布局有一个基本的了解，我们来看看在我们的应用程序中创建和导航到页面的过程。

看看src / app / app.html，我们在接近底部的位置看到这一行：

<ion-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将是导航控制器中加载的第一个页面。 我们来看看吧。

创建一个页面

接下来，我们来看看我们正在导入的HelloIonicPage。 在src / pages / hello-ionic /文件夹里面，打开hello-ion.ts。

您可能已经注意到，每个页面都有自己的文件夹，以该页面命名。 在每个文件夹中，我们也看到一个.html和一个.scss文件，名称相同。 例如，在hello-ion /我们将找到hello-ion.ts，hello-ionic.html和hello-ion.scss。 虽然不需要使用这种模式，但有助于保持组织。

下面我们来看看HelloIonicPage类。 这将使用Ionic的导航系统加载所有Ionic指令已经提供的Page - 一个角色组件。 请注意，由于Pages是动态加载的，因此它们不需要有一个选择器。 但是，为了覆盖特定页面上的默认样式，选择器很有用（参见hello-ion.scss）：

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

@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  constructor() {

  }
}

所有页面都有一个类以及正在编译的关联模板。 我们来看看src / pages / hello-ion / hello-ionic.html - 这个页面的模板文件：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>


+<ion-content padding>

  <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 ion-button color="primary" menuToggle>Toggle Menu</button>
  </p>

</ion-content>

<ion-navbar>是此页面上导航栏的模板。 当我们导航到此页面时，导航栏的按钮和标题将转换为页面转换的一部分。

模板的其余部分是标准的 Ionic 代码，用于设置我们的内容区域并打印我们的欢迎信息。

创建附加页面

要创建一个额外的页面，我们不需要做太多的工作，除了确保我们正确配置标题以及我们希望导航栏显示的任何其他页面。

我们来看看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。 在下一节中，我们将学习如何导航到新页面！