Has anyone successfully implemented deeplinking with tabs?

Ionic Framework ionic-v3
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