IONIC2 Series--using Deeplinker to implement a specified page URL

Ionic2 uses an approximate native app-style page navigation, and does not support ANGULAR2 routing. This is a convenient way to develop a native app, but if you're going to have a problem developing a web-only page, ANGULAR2 's router can provide a more flexible configuration. For example, in the case of the homepage is a tabs page, how to control the user to see the first tab? By default, the first tab is navigated to, and the URL of the address bar does not change as the page switches. Fortunately, Ionic2 provides a similar route to the Deeplinker function, can achieve the above purposes.

Deeplinker works with Navcontroller, but the user is basically not dealing directly with this stuff. This is only required if the user needs to process the URL. With Deeplinker, if Navcontroller push a new page, Deeplinker looks for a matching URL setting in the configuration and updates the URL.

Our demand scenario is this, in the public number of the menu bar has n menu, click on a different menu, you need to navigate directly to our page corresponding to the tab, rather than let the user to select tab. Here's a look at the specific approach.

Create a new Ionic2 project first. The latest CLI has been upgraded to the 2.1.12,ionic-angular upgrade to RC3, which is highly recommended for updates. Use the following command to create a project for the tabs template:

Ionic Start Tabsdemo Tabs--v2

Items with three tab pages are created by default. There are mainly 4 pages, one tabs is the main page, the other three tab pages are home,about,contact respectively.

Basic Usage

Deeplinker is used in the Ionicmodule.forroot method as a third parameter:

Imports: [   ionicmodule.forroot (MyApp, {}, {     links: []  })]

The object in the array is deeplinkerconfig, which configures the URL and page matching relationships, which is generally the case:

imports: [   ionicmodule.forroot (MyApp, {}, {     links: [      ' Home ', segment: ' Home ' }    ]  } ) ]

In other words, when browsing homepage This page, the URL will become http://examplesite/#/home/home

Pass the reference

Sometimes you also need to pass parameters from the URL, which can be used in the following form:

Links: [  ' Home ', segment: ' Home ' }  ' Detail ', segment: ' Detail/:user ' }]

This allows you to receive the user parameter in the Detailpage TS file for processing. It is important to note that this parameter should be deeplinker serialized, so it is recommended to set it to a string or number.

implementation jumps to the specified tab

Modify the App.module.ts file to change the Ionicmodule.forroot method to the following code:

Ionicmodule.forroot (MyApp, {}, {      links: [         ' Tabs ', segment: ' Tabs/:tabid ' }      ]    })

This means, give the tabs page a parameter, such as HTTP://EXAMPLESITE/#/TABS/1, so that the app jumps directly to the second tab.

Modify the Tabs.ts file to read the following code:

Export class Tabspage {//This tells the tabs component which Pages  //should is each tab ' s root PageTab1root: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; }      }}

Two variables were added, and the passed parameters were obtained by Navparams and assigned to Selecttabindex.

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

<ion-tabs selectedindex={{selecttabindex}}>

Run ionic serve command, will automatically open the Http://localhost:8100/address, now open a new window, enter the Http://localhost:8100/#/tabs/1,OK, jump directly to the second tab. Finish the call.

Default History

In another case, if you navigate directly to the internal page from another page, which page is returned when you click back? For example, from the push notification into the News details page, when the click Back, should return to the home page. So IONIC2 provides the defaulthistory parameter, which is returned to this page if the history page does not exist in the page history stack. Use the following:

Links: [  ' Home ', segment: ' Home ' }  ' Detail ', segment: ' Detail/:user ', defaulthistory: [ Homepage]}]

IONIC2 Series--using Deeplinker to implement a specified page URL