https://ionicframework.com/docs//intro/tutorial/adding-pages/
rootPage
现在我们对Ionic应用程序的布局有了基本的了解，接下来我们将介绍创建应用程序并导航到页面的过程。
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 {
...
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-ionic.ts文件。
您可能已经注意到每个页面都有自己的文件夹，该文件夹以该页面命名。
在每个文件夹内，我们还会看到一个.html和一个名称相同的.scss文件。
例如，在hello-ionic /里面，我们会找到hello-ionic.ts，hello-ionic.html和hello-ionic.scss。
虽然不需要使用此模式，但可以有条理地组织事件。
下面，我们看到HelloIonicPage类。
这创建了一个页面 - 一个Angular组件，它已经提供了所有的Ionic指令，可以使用Ionic的导航系统加载。
请注意，因为Pages是动态加载的，所以它们不需要有选择器（selector）。
但是，选择器对于覆盖特定页面上的默认样式非常有用（请参阅hello-ionic.scss）
import { Component } from '@angular/core';
@Component({
selector: 'page-hello-ionic',
templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
constructor() {
}
}
所有页面都有一个类以及正在编译的关联模板。例如src/pages/hello-ionic/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({
selector: 'page-list',
templateUrl: 'list.html'
})
export class ListPage {
icons: string[];
items: Array<{title: string, note: string, icon: string}>;
constructor(public navCtrl: NavController, public navParams: NavParams) {
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非常相似。
在下一节中，我们将学习如何导航到新页面！
Navigating to Pages
回想一下上一节，我们在ListPage类中有一个函数，看起来像这样：
itemTapped(event, item) {
this.navCtrl.push(ItemDetailsPage, {
item: item
});
}
您可能已经注意到我们正在引用ItemDetailsPage。这是教程启动器中包含的一个页面。
我们将它导入到app/pages/list/list.ts中，以便我们可以使用它：
import { ItemDetailsPage } from '../pages/item-details/item-details';
保存文件后，您会注意到ionic服务进程会重新编译您的应用程序并重新加载浏览器。让我们在浏览器中重新访问我们的应用程序，当我们点击一个项目时，它将导航到项目详细信息页面！请注意，菜单切换将替换为后退按钮。这是Ionic遵循的本地风格，但可以进行配置
How It Works
Ionic中的导航工作就像一个简单的堆栈，我们将新页面push到堆栈的顶部，这使我们在应用程序中前进并显示后退按钮。要倒退，我们pop将首页关闭。由于我们在构造函数中设置了this.navCtrl，我们可以调用this.navCtrl.push（），并将它传递给我们想要导航到的页面。我们还可以传递一个包含我们想传递给正在导航的页面的数据的对象。使用push导航到新页面很简单，但是Ionic的navigation system非常灵活。
查看导航文档以查看更多高级导航示例。
谈到网址，最新的Ionic与Ionic v1.x有点不同。我们不使用URL来导航，而是使用它们来确保我们总能回到页面（例如在应用程序启动时）。这意味着我们不限于使用href来浏览。但是，我们仍然可以选择使用URL在必要时导航到页面。
Next Steps
你已经通过了教程并且正在朝着离子技术的方向前进！
如果您正在寻找有关Ionic包含的其他内容的概述，请查看组件文档。
要了解如何使用设备API，请转到Native部分。
如果您在任何时候需要帮助，请查看我们的开发人员资源部分，或者在论坛上提出问题。