ionic3跳轉頁面的方法

ionic3很好很強大，有人噴有人贊。不想參與其中，個人認為如果能很好的滿足需求，好壞都是無所謂的，最合適的才是最好的。總結下最近使用ionic3的一些知識點，方便以后查詢。多句嘴：會ionic3和只會ionic3是兩個境界。

今天有妹子鎮樓。今天的是……

 

2B小姐姐

頁面想要“跳來跳去”的需要借助“工具”才能實現，就好像我們要攀岩需要有繩子一樣，當前的“繩子”就是我們出場率很高的導航控制器NavController，首先需要在在頁面頂端引入

import { NavController } from ‘ionic-angular’ 

項目中的實際應用情況見下圖：

 

導航控制器

只是引用組件的話，我們的導航控制器還不能使用，必須在構造器中初始化組件才能進行下一步。

//構造器中初始化組件 constructor(public navCtrl: NavController) { //do some thing // or // don`t } 

 

構造器中初始化導航控制器

然后我們就可以用navCtrl的的push方法來跳轉想要的組件頁面。根據typescript的尿性，一般情況下我們需要這樣使用：

this.navCtrl.push(XXXPage,{data}); 

 

跳轉至LoginPage組件

很簡單不是么？不過這只是開始，世界上唯一不變的就是變化，具體使用情境的邏輯或是客戶的異想天開，總會給我們帶來各種各樣的奇葩體驗。后面就是進階裝B階段，都閃開！

 

我要開始裝了，都閃開

假設一種情景，我們的頁面已經進入的足夠深，例如:

列表A --> 列表A2 --> 列表A23--> 列表A235 --> .... --> 內容

ionic3的默認方法只是返回上一級，如果我們想從內容返回至列表A，必須很麻煩的從內容逐級點返回按鈕來返回上一級直至列表A，有多少層就要點擊多少次，要是路徑足夠深估計會點到內傷吐血，這樣的設計會大幅度降低用戶體驗。有沒有什么方法可以從內容直接返回至列表A呢？

回答是肯定的，萬物皆有道。萬物皆有法。道法文檔，才能一切皆有可能。方法popToRoot就是這樣一個方便的神器，它可以直接讓我們返回至導航的根位置，而不管它距離根有多遠。關於這貨的使用方法我摘抄自ionic3官方文檔NavController部分。

popToRoot(opts)

Navigate back to the root of the stack, no matter how far back that is. <<注意這句話

Param	Type	Details
opts	object	Nav options to go with this transition.

Returns a promise which is resolved when the transition has completed.

opts決定了在跳轉時候的過渡效果，在完成功能最高權重思想的指引下下，這個參數我們可以無視。popToRoot方法在具體項目中的運用:

 

返回導航的根

哈哈！這下我們再也不怕“深”了。有此利器，再深我們也能自信滿滿的進去闖一闖。(氣氛怎么有點怪怪的?)

 

完了么？沒有！！具體使用情境是千變萬化的，從來沒有固定套路。popToRoot很強大，但是有一種情況絕對會讓它無能為力。

 

例如，我們有三個tabs，在tabs3下面的的深層路徑組件使用popToRoot只能讓我們直接返回到tabs3的頁面。就像下圖所示。

 

返回root的根

這樣的原因是因為我們在tab.html中已經設置了每個root。所以我們的popToRoot只能讓我們返回至各自的root.

 

設置root

我們會經常遇見這種情況，就是我們需要從tabs3下面的深層次組件需要跳轉到tabs1的根。這個需求是popToRoot無法滿足的。

例如在項目中我的tabs3是設置選項，如果不是登錄狀態的話有些設置是不能操作的，這個時候需要提示用戶登錄，在提示界面如果用戶不點擊登錄而是點擊返回。在返回事件中使用popToRoot只會讓我們返回tabs3頁面，這恰恰不是我們需要的，我們需要的是用戶直接返回至tabs1的首頁。看來還要想另外的辦法。

 

跳轉不同的根

萬事不決找文檔。其實目前問題已經轉向了，並不是導航NavController的功能范疇了，tabs的加入讓問題開始變的撲朔迷離，看來我們需要從tabs相關文檔開始查閱。

功夫不負有心人，在ionic3官方文檔tabs部分中我們找到了一下的這句話:

You can also switch tabs from a child component by calling select() on the parent view using the NavController instance. For example, assuming you have a TabsPage component, you could call the following from any of the child components to switch to TabsRoot3:

switchTabs() {
this.navCtrl.parent.select(2); } 

select方法的參數是tabs的index值，從零開始計算。

這個方法可以讓我們從一個組件中直接跳轉到不同的tabs根位置。例如我的項目中是這樣用的：

 

跨根跳轉

剛接觸ionic肯定會有錯誤，歡迎指正，不歡迎吐槽~

 

報告完畢