页面导航

从上一节回忆一下，我们在ListPage类中有一个函数，看起来像这样：

itemTapped(event, item) {
    this.navCtrl.push(ItemDetailsPage, {
      item: item
    });
}

您可能已经注意到我们引用了ItemDetailsPage。 这是教程启动器中包含的一个页面。 我们将其导入到app / pages / list / list.ts中，以便我们可以使用它：

...
import {ItemDetailsPage} from '../item-details/item-details';

保存文件后，您会注意到 ionic serve 过程将重新编译您的应用程序与新的更改，并重新加载浏览器。 让我们在浏览器中重新访问我们的应用程序，当我们点击一个项目时，它将导航到项目详细信息页面！ 请注意，菜单切换被替换为后退按钮。 这是Ionic遵循的原生风格，但可以配置。

怎么工作的

Ionic 2中的导航功能类似于一个简单的堆栈，我们将新的页面推送到堆栈的顶部，这将使我们在应用中转发并显示一个后退按钮。 要倒退，我们弹出首页。 由于我们在构造函数中设置了this.navCtrl，我们可以调用this.navCtrl.push（），并将其传递给我们要导航的页面。 我们还可以传递一个包含我们要传递给正在导航的页面的数据的对象。 使用push导航到一个新页面很简单，但是Ionic的导航系统非常灵活。 查看导航文档以查看更多高级导航示例。

关于URL，Ionic 2的作用与Ionic 1有所不同，而不是使用URL导航，我们使用它们来确保我们可以随时回到页面（例如在应用程序启动时）。 这意味着我们不限于使用href导航。 但是，如有必要，我们还可以选择使用URL导航到页面。

下一步

不错的工作！ 你已经通过教程，并且正在走向 Ionic 掌握！ 如果您正在寻找 Ionic 附带的内容，请查看组件文档。 要了解如何使用设备API，请转到“原生”部分。 如果您需要帮助，请查看我们的开发人员资源部分，或在论坛上提出问题。