Ionic2系列之使用DeepLinker實現指定頁面URL

NO IMAGE

Ionic2使用了近似原生App的頁面導航方式,並不支援Angular2的路由。這種方式在開發本地App的時候比較方便,但如果要用來開發純Web頁面就有點問題了,這種情況下Angular2的router可以提供更靈活的配置。比如在首頁是一個Tabs頁面的情況下,如何控制使用者看到的第一項Tab?預設情況下都是會導航到第一個Tab,而且位址列的URL並不會跟隨頁面的切換而變化。好在Ionic2提供了一種類似路由的DeepLinker功能,可以實現以上目的。

DeepLinker與NavController一起工作,但是使用者基本不會直接與這個東西打交道。只有使用者需要對URL進行處理的時候才需要配置這個。使用DeepLinker後,如果NavController push了一個新的頁面,DeepLinker會在配置中尋找匹配的URL設定並更新URL。

我們的需求場景是這樣的,在微信公眾號的選單欄有n個選單,點選不同的選單,需要直接導航到我們頁面對應的Tab上,而不是讓使用者再去選擇Tab。下面說一下具體做法。

首先新建一個Ionic2專案。目前最新的CLI已經升級到了2.1.12,ionic-angular升級到了RC3,強烈建議更新。使用以下命令來建立一個Tabs模板的專案:


ionic start TabsDemo tabs --v2

預設會建立有三個Tab頁的專案。主要有4個頁面,一個Tabs是主頁面,其他三個Tab頁分別是home,about,contact。

基本用法

DeepLinker是在IonicModule.forRoot方法中使用,作為第三個引數:


imports: [
IonicModule.forRoot(MyApp, {}, {
links: []
})
]

陣列裡的物件是DeepLinkerConfig,配置了URL和頁面的匹配關係,一般來說是這樣子的:


imports: [
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: HomePage, name: 'Home', segment: 'home' }
]
})
]

也就是說,當瀏覽HomePage這個頁面的時候,URL會變成http://examplesite/#/home/home

傳參

有的時候也需要從URL傳遞引數,可以用下面的形式:


links: [
{ component: HomePage, name: 'Home', segment: 'home' }
{ component: DetailPage, name: 'Detail', segment: 'detail/:user' }
]

這樣在DetailPage的ts檔案中就可以接收user這個引數,進行處理。需要注意的是,這個引數應該是可以被DeepLinker序列化的,因此建議設定為一個string或number。

實現跳轉到指定Tab

修改app.module.ts檔案,將IonicModule.forRoot方法改為如下程式碼:


IonicModule.forRoot(MyApp, {}, {
links: [
{ component: TabsPage, name: 'Tabs', segment: 'tabs/:tabId' }
]
})

這裡的意思是,給Tabs頁傳一個引數,如http://examplesite/#/tabs/1,這樣就讓App直接跳到第二個Tab。

修改tabs.ts檔案,改為如下程式碼:


export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
public tabId: number;
public selectTabIndex: number;
constructor(public params: NavParams) {
this.tabId = params.get("tabId");
if(this.tabId != undefined || this.tabId !=null)
{
this.selectTabIndex = this.tabId;
}
}
}

新增了兩個變數,然後通過NavParams取得傳遞過來的引數並賦值給selectTabIndex。

修改tabs.html,給Tabs元件新增一個繫結:


<ion-tabs selectedIndex={{selectTabIndex}}>

執行ionic serve命令,會自動開啟http://localhost:8100/地址,現在開啟一個新視窗,輸入http://localhost:8100/#/tabs/1,OK,直接跳到第二個Tab了。打完收工。

預設歷史

還有一種情況,如果從其他頁面直接導航到內部的頁面,當點選返回的時候,該返回哪個頁面呢?比如從推送通知進到新聞詳情頁面,當點選返回的時候,應該返回首頁。所以Ionic2提供了defaultHistory引數,如果頁面歷史堆疊中不存在歷史頁面的時候,就會返回到這個頁面。用法如下:


links: [
{ component: HomePage, name: 'Home', segment: 'home' }
{ component: DetailPage, name: 'Detail', segment: 'detail/:user', defaultHistory: [HomePage] }
]

以上所述是小編給大家介紹的Ionic2系列之使用DeepLinker實現指定頁面URL,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對指令碼之家網站的支援!

您可能感興趣的文章:

ionic實現滑動的三種方式ionic實現可滑動的tab選項卡切換效果Ionic實現仿通訊錄點選滑動及$ionicscrolldelegate使用分析ionic元件ion-tabs選項卡切換效果例項url重寫IIRF(Ionic”s Isapi Rewrite Filter)手冊Ionic如何實現下拉重新整理與上拉載入功能鬱悶!ionic中獲取ng-model繫結的值為undefined如何解決ionic js 模型 $ionicModal 可以遮住使用者主介面的內容框Ionic快速安裝教程Ionic3 UI元件之Gallery Modal詳解