Has anyone successfully implemented deeplinking with tabs?

Ionic Framework ionic-v3
1

Hi everyone, I have an app that uses three tabs, I’ve tried numerous times over the past 15 months to implement ionic deeplinking with zero success. I have only been successful at opening the app to the home page but i am not able to open the app to a specific business page in the second tab as expected. Any help would be greatly appreciated.

2

Can you describe your issue in more detail please ? Do you mean you want to route as example from Page1 to Page2 and switch the selected tab ?

3

yes i have three tabs [page 1(rootpage), page 2, page 3]
page 2 is an index page, with a grid of businesses,

I would like to deep link to my business page in the page 2 tab navigation stack
eatokra://#/page-2/businesses/:business_id

4

Thats pretty simple actually the best would be if you work with enums for your tabs and with id for your grid.

In your Tabs.ts

import { NavParams } from 'ionic-angular';


export class TabsPage {
   _tabselection: number;
   _tab1Root = Page1;
   _tab2Root = Page2;
   _tab3Root = Page3;

//add a viewchild
  @ViewChild('yourTabs') tabRef: Tabs;
}
//add this into your constructor
constructor(private navParams: NavParams){

//initialize your your roottab
  this._tabselection = navParams.get('tab') || 0;
}
  ionViewDidEnter() {
    this.tabRef.select(this._tabselection);
  }
}
//now we are creating the enums
export enum TabsEnum {
  PAGE1 = 0,
  PAGE2 = 1,
  PAGE3 = 2
};

In your Tabs.html
Add these lines to your tabs.

<ion-tabs #yourTabs>
<ion-tab [root]="_tab1Root"> //don't forget the other pages...

Now lets get to the fun part we are going to switch pages by a buttonpress!

In your page1.ts

Import your TabsPage and your TabsEnum

import { TabsPage, TabsEnum } from '../your/Path';

myParam: string = 'yourGridid';

buttonPress(){
  //this will select your PAGE2 TAB!
  that.navCtrl.parent.select(TabsEnum.PAGE2);
  //this will push to the PAGE2 with the selected Parameter
  this.navCtrl.push(PAGE2 { 'myParam': this.myParam });
}

Page2.ts
What I would do here later on, create an if and else so if you don’t push from parameter so that it wont load.

constructor(){
  myParam: string;
  this.myParam = params.get('myParam');
  //this will scroll to your grid's id (add the if and else here)

  let yOffset = myParam.offsetTop;
  this.content.scrollTo(0, yOffset, 2000);

}
//I think you can also do this here but initializing it would be more efficient.
ionViewDidLoad(element: string){
  //your code here
}

Note: You can bring this futher by adding certain values to your parameter story to make it more efficient.

Thats it!
I hope it works out. :blush::rabbit2:

1 Like
5

For a demo app I displayed to one of our meetup, I did use a “tab selector” which could be use behind the splash screen to login route the user to the right page. Not deep linking but the idea is the same.

You could have a look to the code there:

Note: it’s in the branch “quirks” not “master”

It works like this.

I have implemented a service TabsService to trigger a tab switch aka that’s the service you have to call when your deep linking happens.

 this.tabsService.switchToTab(1);

This service contains a subject which is subscribed in the Tabs page. There, with the use of a ViewChild, the selection of the page happens.

 @ViewChild('myTabs') tabRef: Tabs;
 
 ionViewDidLoad() {
   this.tabsService.tabIndex.subscribe((index: number) => {
      this.tabRef.select(index);
  });
}

Final part, the splash screen is set as not being automatically hidden. In the tab page, it should be manually done

ionViewDidEnter() {
   this.splashScreen.hide();
 }
1 Like
6

Thank You i will give it a try!

7

Thank You i will give it a try also

1 Like