Ionic2 series -- use DeepLinker to implement the specified page URL, ionic2deeplinker

Ionic2 series -- use DeepLinker to implement the specified page URL, ionic2deeplinker

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 problem if you want to develop pure Web pages. In this case, Angular2's router can provide more flexible configuration. For example, if the home page is a Tabs page, how does one control the first Tab displayed by the user? By default, the system will navigate to the first Tab, and the URL in the address bar will not change with the page switch. Fortunately, Ionic2 provides a similar DeepLinker function to achieve the above purpose.

 

DeepLinker works with NavController, but the user basically does not deal with this thing directly. This parameter must be configured only when the user needs to process the URL. After DeepLinker is used, if NavController pushes a new page, DeepLinker searches for matching URL settings in the configuration and updates the URL.

 

This is our scenario. There are n menus in the menu bar of the public number. To click different menus, You Need To directly navigate to the corresponding Tab on our page, instead of asking the user to select the Tab. The following describes the specific practices.

 

Create an Ionic2 project. Currently, the latest CLI has been upgraded to 2.1.12, and ionic-angular has been upgraded to RC3. We strongly recommend that you update it. Use the following command to create a Tabs template project:

 

ionic start TabsDemo tabs --v2

Projects with three tabs are created by default. There are four main pages. One Tabs is the home page, and the other three Tabs are home, about, and contact.

 

Basic usage

DeepLinker is used in the IonicModule. forRoot method and serves 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, which is generally like this:

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

That is to say, when you browse the HomePage page, the URL will change to http: // examplesite/#/home

Passing Parameters

Sometimes you also need to pass parameters from the URL. You can use the following form:

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

In this way, you can receive the user parameter in the ts file of DetailPage for processing. Note that this parameter can be serialized by DeepLinker. Therefore, we recommend that you set it to a string or number.

To jump to a specified Tab

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

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

Here it means to pass a parameter to the Tabs page, such as http: // examplesite/#/tabs/1, so that the App can directly jump to the second Tab.

Modify the tabs. ts file with 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;    }      }}

Two variables are added, and the passed parameters are obtained through NavParams and assigned to selectTabIndex.

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

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

When you run the ionic serve command, the http: // localhost: 8100/address is automatically opened. Now, in a new window, enter http: // localhost: 8100/#/tabs/1, OK, jump to the second Tab. Close the job.

Default history

In another case, if you directly navigate from other pages to the internal page, which page will be returned when you click "return? For example, if you enter the news details page from a push notification, you should return to the homepage when you click return. Therefore, Ionic2 provides the defaultHistory parameter. If there is no history page in the page history stack, it will return to this page. The usage is as follows:

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