(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相關文檔