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,配置了URLLinkerConfig子的:
imports: [ IonicModule.forRoot(MyApp, {}, { links: [ { component: HomePage, name: 'Home', segment: 'home' } ] }) ]
也就是說,當瀏覽HomePage這個頁面的時候,URL會變成http://examplesite/#/home/home
傳參
有的時候也需要從URLhome
傳遞參數,可以用下面的形式: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:p. //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/host,現在開啟一個執行ionic serve指令,會自動開啟http://localhost:8100/ /localhost:8100/#/tabs/1,OK,直接跳到第二個Tab了。打完收工。 預設歷史還有一種情況,如果從其他頁面直接導航到內部的頁面,當點擊返回的時候,該返回哪個頁面呢?例如從推播通知進到新聞詳情頁面,點擊返回的時候,應該會回到首頁。所以Ionic2提供了defaultHistory參數,如果頁面歷史堆疊中不存在歷史頁面的時候,就會回到這個頁面。用法如下:
links: [ { component: HomePage, name: 'Home', segment: 'home' } { component: DetailPage, name: 'Detail', segment: 'detail/:user', defaultHistory: [HomePage] } ]