ionic2 頁面跳轉 push() pop() NavController,navParams

 

新建頁面http://zyyapp.com/post/185.html

Ionic 2之頁面堆棧 :http://blog.csdn.net/u010730126/article/details/63254988

 

 

 

 

還記得Ionic 1中的state和router嗎？他們兩兄弟配合起來完成頁面導航的功能，雖然它們使用起來並不算複雜## 標題 ##，概念也很清晰，不過當頁面增多、state嵌套等問題出現後複雜度也會增長，當複雜程度到達必定程度時工程必然難以維護和理解。而Ionic 2效仿原生頁面堆棧的概念解決了上述問題。

頁面與組件

頁面是應用的基石，是交互的基本單位，Ionic 2中頁面是經過組件構成的，Ionic 2中實現了不少經常使用組件用於更快地構建應用，如Modal、Popup等。在理解Ionic 2之class及其修飾器@App、@Pipe中咱們接觸到了修飾器的概念，而且簡單介紹了@App和@Pipe的相關使用方式，使用組件也須要先使用修飾器@Component定義，下面是其基本使用方式：

import {Component} from '@angular/core'; @Component({ templateUrl: "template.html" }) export class PageName(){ constructor(){ } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

使用@Component首先須要使用import導入，並使用templateUrl或template指定其頁面構成。

頁面堆棧

堆棧的概念你們都很熟悉，其基本原則是：先入後出。頁面堆棧也不例外，能夠將頁面堆棧視爲書箱，具體的頁面視爲不一樣的待放入書箱的書籍，每一次水平放入一本書，先放的書必然被後來的書「擋住」從而看不到了，想要從新看到就須要先將上面的書拿開。

其實Ionic 2中與其說是頁面堆棧，不如說是組件堆棧，組件包括但不限於頁面，而相似於Modal、Popup、Alert等相關的組件也是由堆棧維護的，下面說起的頁面實際上是組件的意思。

Ionic 2中使用NavController操做頁面堆棧。

// my-page.ts import {Component} from '@angular/core'; @Component({ templateUrl: "my-page.html" }) export class MyPage(){ constructor(public navCtrl: NavController) { // 使用this.navCtrl操做頁面堆棧 } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

這裏創造NavController的實例是爲了在類中任意地方都可以使用。

NavController最基本的就是「放書」的push操做和「拿書」的pop操做，其具體操做相似於Array：

push操做

push操做將一個頁面放到頁面堆棧的最頂層，使其對用戶可見：

this.navCtrl.push(OtherPage);

• 1

• 1

使用push操做頁面，只須要提供其頁面組件的引用便可，固然首先要使用import將其導入：

import {OtherPage} from '../other-page/other-page';

• 1

• 1

頁面間傳值

大多狀況下，頁面之間須要通訊，即頁面之間須要進行數據傳遞，能夠爲push操做指定第二個參數做爲頁面間傳遞的參數：

// my-page.ts this.navCtrl.push(OtherPage, { key1: value1, key2: value2 });

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

在OtherPage中可使用NavParams獲取到其餘頁面傳至本頁面的值：

// other-page.ts import {Component} from '@angular/core'; @Component({ templateUrl: "other-page.html" }) export class OtherPage(){ constructor(public navCtrl: NavController, public navParams: NavParams) { const data = this.navParams.data; const value1 = this.navParams.get('key1'); const value2 = this.navParams.get('key2'); } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

pop操做

和push對應的是pop操做，其實不少時候並不須要手動執行pop操做，Ionic 2中使用push操做時，導航欄上會加上返回按鈕用於回到上一頁面，也就是說pop操做會被自動執行。固然手動pop操做也是必要的，如用戶註銷須要跳轉至登陸頁面等場景均須要手動調用pop操做：

this.navCtrl.pop();

• 1

• 1

總結

NavController的功能不少很強大，這裏只介紹了其最基本的功能，請你們移步官方文檔。

參考文檔：
理解Ionic 2之class及其修飾器@App、@Pipe
Ionic 2 NavController官方文檔
Ionic 2 Component官方文檔