3.5.导航到页面

回忆一下上个章节,我们在ListPage类里有一些下面的代码:

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

你也许注意到我们引用了ItemDetailPage。我们用以下的代码将其importapp/pages/list/list.ts里:

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

当保存文件后,ionic serve进程会自动重新编译以应用新的更改,并自动刷新浏览器。重新看一下浏览器中的页面,当点击一个项时,它将会导航到详情页面。注意菜单按钮被一个返回按钮代替了,这是Ionic遵循的一种原生App的导航方式,当然这是可以被配置的。

工作原理

Ionic 2的导航像一个简单的栈,我们使用push方法来导航到新页面,将其放在栈的顶部,并显示一个返回按钮。对于返回,我们使用pop方法将其从栈中移除。因为我们在构造函数中设置了this.navCtrl属性,我们可以调用this.navCtrl.push()方法,来导航到一个新的页面。我们还可以将一个object传递给将要导航过去的页面。使用push方法导航到新页面非常简单,但Ionic的导航系统是非常灵活的。可以从导航文档处获得更详细的导航示例。

对于UrlIonic 2Ionic 1是不同的。我们要确保我们可以返回到某个Page,所以一般不使用Url来进行导航。当然我们在必要的时候还是有办法来使用Url导航的。

接下来

你已经掌握了Ionic 2的入门知识。你可以继续学习Ionic 2的各种Component,和关于硬件的Native APIs

results matching ""

    No results matching ""