Ionic2 Series uses Deeplinker to implement the specified page Url_javascript tips

Ionic2 uses a page navigation method similar to the native app, and does not support ANGULAR2 routing. This is a convenient way to develop a local app, but if there is a problem with developing a pure Web page, the ANGULAR2 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 follow the page's switch. Fortunately, Ionic2 provides a deeplinker function similar to routing, which can achieve the above purposes.

Deeplinker works with Navcontroller, but the user basically does not deal directly with this thing. This is required only when the user needs to process the URL. After using Deeplinker, if Navcontroller push a new page, Deeplinker will find a matching URL setting and update the URL in the configuration.

Our demand scenario is this, in the micro-public number of the menu bar has n menu, click on a different menu, need to directly navigate to our page corresponding to the tab, rather than let users to choose tab. Here is a concrete approach.

First, create a new Ionic2 project. The latest CLI has been upgraded to the 2.1.12,ionic-angular upgrade to RC3 and is strongly recommended for updating. Use the following command to create a tabs template project:

Ionic Start Tabsdemo Tabs--v2

Items that have three tab pages are created by default. There are 4 main pages, one tabs is the homepage, and the other three tab pages are home,about,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, configuring the URL and the matching relationship of the page, which is generally the case:

Imports: [
ionicmodule.forroot (MyApp, {}, {
links: [
{component:homepage, Name: ' Home ', segment: ' Home '}
   ]
})
]

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

Pass Reference

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

Links: [
{component:homepage, Name: ' Home ', segment: ' Home '}
{component:detailpage, Name: ' Detail ', segment : ' Detail/:user '}
]

This allows the user to receive this parameter in the Detailpage TS file for processing. Note that this parameter should be serialized by Deeplinker, so it is recommended to be set 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: [
{component:tabspage, Name: ' Tabs ', segment: ' Tabs/:tabid '}
]
   })

The idea here is to pass a parameter to the tabs page, such as http://examplesite/, so that the app jumps directly to the second tab.

Modify the Tabs.ts file and change to the following code:

Export class Tabspage {
//This tells the tabs component which Pages
//should is each tab ' s root Page
Tab1roo T: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 then passed through Navparams to obtain the passed parameters and assign values 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

There is also a situation, if the direct navigation from other pages to the internal page, when the click Back, which page should return? For example, from the push notice into the News details page, when the click Back, you should return to the home page. So IONIC2 provides the defaulthistory parameter and returns to this page if the history page does not exist in the page history stack. Usage is as follows:

Links: [
{component:homepage, Name: ' Home ', segment: ' Home '}
{component:detailpage, Name: ' Detail ', segment: ' Detail/:user ', defaulthistory: [homepage]}
]

The above mentioned is a small set to introduce the IONIC2 series of the use of Deeplinker to achieve the designated page URL, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!