作者：Grey

原文地址： http://www.cnblogs.com/greyzeng/p/5551535.html

Ionic2中創建一個頁面很方便，在頁面之間相互切換也很方便，我們在實現如下需求：

在主頁面創建一個按鈕，點擊按鈕，跳轉到一個新頁面，在跳轉過程中，我們可以也可以在頁面之間傳遞數據。

• 進入項目目錄：cd MyFirstApp
• 創建一個新頁面：

  ionic g page SecondPage

  

  將@import "../pages/second-page/second-page.scss";添加到app\themes\app.core.scss中

  

• 在主頁面app\pages\home\home.html中增加一個按鈕，并對這個按鈕增加相應的點擊事件處理函數openModal()

  

• 在app\pages\home\home.ts中，補充這個事件處理函數的內容。我們可以通過:

  this.nav.push(newpage)

  這個方法來跳轉到newpage這個頁面，同時，我們可以用

  this.nav.push(newpage, { name "grey", job: "IT"});

來向newpage傳入一些數據，比如以上表示向newpage傳入name="grey", job="IT"，

在newpage中，我們可以通過.navParams.get('name')和navParams.get('job')來獲取相應的值"grey"和"IT"

app\pages\home\home.ts增加如下代碼：

在app\pages\second-page\second-page.ts中，增加如下代碼，用于獲取從上個頁面傳來的數據

• 將傳來的數據展示出來：

  app\pages\second-page\second-page.html中：

  

• 演示效果: ionic serve -l

  

  點擊按鈕:

  

• 此外，我們可以在SecondPagePage中增加一個返回到主頁的按鈕，

  app/pages/second-page/second-page.html

  

  在app/pages/second-page/second-page.ts中增加一個處理返回的事件函數：this.nav.pop()

  

• 演示效果：ionic serve -l

  

  點擊Back按鈕，返回主頁面

  

     

------

上一篇：Ionic2學習筆記（5）：Provider

下一篇：Ionic2學習筆記（7）：Input