Ionic2使用了近似原生App的頁(yè)面導(dǎo)航方式，并不支持Angular2的路由。這種方式在開(kāi)發(fā)本地App的時(shí)候比較方便，但如果要用來(lái)開(kāi)發(fā)純Web頁(yè)面就有點(diǎn)問(wèn)題了，這種情況下Angular2的router可以提供更靈活的配置。比如在首頁(yè)是一個(gè)Tabs頁(yè)面的情況下，如何控制用戶看到的第一項(xiàng)Tab？默認(rèn)情況下都是會(huì)導(dǎo)航到第一個(gè)Tab，而且地址欄的URL并不會(huì)跟隨頁(yè)面的切換而變化。好在Ionic2提供了一種類似路由的DeepLinker功能，可以實(shí)現(xiàn)以上目的。

DeepLinker與NavController一起工作，但是用戶基本不會(huì)直接與這個(gè)東西打交道。只有用戶需要對(duì)URL進(jìn)行處理的時(shí)候才需要配置這個(gè)。使用DeepLinker后，如果NavController push了一個(gè)新的頁(yè)面，DeepLinker會(huì)在配置中尋找匹配的URL設(shè)置并更新URL。

我們的需求場(chǎng)景是這樣的，在微信公眾號(hào)的菜單欄有n個(gè)菜單，點(diǎn)擊不同的菜單，需要直接導(dǎo)航到我們頁(yè)面對(duì)應(yīng)的Tab上，而不是讓用戶再去選擇Tab。下面說(shuō)一下具體做法。

首先新建一個(gè)Ionic2項(xiàng)目。目前最新的CLI已經(jīng)升級(jí)到了2.1.12，ionic-angular升級(jí)到了RC3，強(qiáng)烈建議更新。使用以下命令來(lái)創(chuàng)建一個(gè)Tabs模板的項(xiàng)目：

ionic start TabsDemo tabs --v2

默認(rèn)會(huì)建立有三個(gè)Tab頁(yè)的項(xiàng)目。主要有4個(gè)頁(yè)面，一個(gè)Tabs是主頁(yè)面，其他三個(gè)Tab頁(yè)分別是home，about，contact。

基本用法

DeepLinker是在IonicModule.forRoot方法中使用，作為第三個(gè)參數(shù)：

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

數(shù)組里的對(duì)象是DeepLinkerConfig，配置了URL和頁(yè)面的匹配關(guān)系，一般來(lái)說(shuō)是這樣子的：

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

也就是說(shuō)，當(dāng)瀏覽HomePage這個(gè)頁(yè)面的時(shí)候，URL會(huì)變成http://examplesite/#/home/home

傳參

有的時(shí)候也需要從URL傳遞參數(shù)，可以用下面的形式：

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

這樣在DetailPage的ts文件中就可以接收user這個(gè)參數(shù)，進(jìn)行處理。需要注意的是，這個(gè)參數(shù)應(yīng)該是可以被DeepLinker序列化的，因此建議設(shè)置為一個(gè)string或number。

實(shí)現(xiàn)跳轉(zhuǎn)到指定Tab

修改app.module.ts文件，將IonicModule.forRoot方法改為如下代碼：

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

這里的意思是，給Tabs頁(yè)傳一個(gè)參數(shù)，如http://examplesite/#/tabs/1，這樣就讓App直接跳到第二個(gè)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;
}
}
}

添加了兩個(gè)變量，然后通過(guò)NavParams取得傳遞過(guò)來(lái)的參數(shù)并賦值給selectTabIndex。

修改tabs.html，給Tabs組件添加一個(gè)綁定：

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

運(yùn)行ionic serve命令，會(huì)自動(dòng)打開(kāi)http://localhost:8100/地址，現(xiàn)在打開(kāi)一個(gè)新窗口，輸入http://localhost:8100/#/tabs/1，OK，直接跳到第二個(gè)Tab了。打完收工。

默認(rèn)歷史

還有一種情況，如果從其他頁(yè)面直接導(dǎo)航到內(nèi)部的頁(yè)面，當(dāng)點(diǎn)擊返回的時(shí)候，該返回哪個(gè)頁(yè)面呢？比如從推送通知進(jìn)到新聞詳情頁(yè)面，當(dāng)點(diǎn)擊返回的時(shí)候，應(yīng)該返回首頁(yè)。所以Ionic2提供了defaultHistory參數(shù)，如果頁(yè)面歷史堆棧中不存在歷史頁(yè)面的時(shí)候，就會(huì)返回到這個(gè)頁(yè)面。用法如下：

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

以上所述是小編給大家介紹的Ionic2系列之使用DeepLinker實(shí)現(xiàn)指定頁(yè)面URL，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論