Ionic2 series uses DeepLinker to implement specified page URL

Ionic2 uses a page navigation method similar to the native App, and does not support Angular2 routing. This method is more convenient when developing local Apps, but it is a bit problematic if it is used to develop pure Web pages. In this case, Angular2's router can provide more flexible configuration. For example, if the homepage is a Tabs page, how to control the first Tab that the user sees? By default, it will navigate to the first Tab, and the URL in the address bar will not change as the page switches. Fortunately, Ionic2 provides a routing-like DeepLinker function that can achieve the above purpose.

DeepLinker works together with NavController, but users will basically not interact with this thing directly. This is only needed when the user needs to process the URL. After using DeepLinker, if NavController pushes a new page, DeepLinker will look for matching URL settings in the configuration and update the URL.

Our demand scenario is like this. There are n menus in the menu bar of the WeChat official account. Clicking on different menus requires direct navigation to the corresponding tab of our page, rather than letting the user select the tab. Let’s talk about the specific methods.

First create a new Ionic2 project. Currently, the latest CLI has been upgraded to 2.1.12, and ionic-angular has been upgraded to RC3. It is strongly recommended to update. Use the following command to create a Tabs template project:

ionic start TabsDemo tabs --v2

A project with three Tab pages will be created by default. There are mainly 4 pages, one Tabs is the main page, and the other three Tabs are home, about, and contact.

Basic usage

DeepLinker is used in the IonicModule.forRoot method as the third parameter:

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

The object in the array is DeepLinkerConfig, which configures the matching relationship between the URL and the page. Generally speaking, it is like this Sub:

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

That is to say, when browsing the HomePage page, the URL will become http://examplesite/#/home/home

Passing parameters

Sometimes it is also necessary to transfer parameters from the URL To pass parameters, you can use the following form:

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

In this way, the user parameter can be received in the ts file of DetailPage and processed. It should be noted that this parameter should be serializable by DeepLinker, so it is recommended to set it to a string or number.

Realize jumping to the specified Tab

Modify the app.module.ts file and change the IonicModule.forRoot method to the following code:

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

The meaning here is to pass a parameter to the Tabs page, such as http: //examplesite/#/tabs/1, so that the App jumps directly to the second Tab.

Modify the tabs.ts file to the following code:

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;
}
}
}

Add two variables, then obtain the passed parameters through NavParams and assign them to selectTabIndex.

Modify tabs.html and add a binding to the Tabs component:

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

Run the ionic serve command and the http://localhost:8100/ address will automatically open. Now open a new window and enter http:// /localhost:8100/#/tabs/1, OK, jump directly to the second Tab. Call it a day.

Default history

There is another situation. If you navigate directly from other pages to an internal page, when you click return, which page should you return to? For example, when you go to the news details page from a push notification, when you click back, you should return to the home page. Therefore, Ionic2 provides the defaultHistory parameter. If there is no historical page in the page history stack, it will return to this page. Usage is as follows:

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