(5)ionic2--导航

在之前的文章中,我们在ListPage类中定义了这样一个方法

itemTapped(event, item) {
    console.log('You selected:', item.title);
}

我们做一点改动,实现导航到新页面的功能

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

 ItemDetailsPage这个页面需要在list.js文件中引入才可以使用哦

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

保存之后, ionic serve 会重新编译你的app,然后载入到浏览器当中.

导航功能实现的原理;

    ionic2中的导航原理类似一个简单的堆栈.如果我们要打开一个新页面,那么这个堆栈就会把这个页面放入栈的顶端,然后显示一个返回按钮.如果我们要返回上一页,我们把这个页面从栈顶剔除.因为我们已经在构造器中创建了this.nav方法,所以在这里可以调用this.nav.push(),传入我们想要到达的页面.我们同时可以传入一个对象,这个对象包含着我们想要传递的数据..使用push()来导航到一个新页面是很简单的,于此同时你也可以自己设置导航的方法,可以google相关文档