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

標籤：bash   開發   通知   component   控制   lin   跳轉   最新   bin   

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