Open page in another tab


#1

Hi
I have two tabs- Tab1 and Tab2

Tab1 is home tab. This tab contain item-list. in this there are 04 list. List1, List2, List3 & List4

I want that, When I click on any list. It will open corresponding page in the tab2. Is it possible. Plz Help.
Thank You all.


#2

Take a look at this demo app I’ve built showing how to do this.


#3

What would be the best way to load a new page into Tab 2 once you have selected it? I can select Tab2 and the app changes to Tab2 but the “LoadDifferentTab2Page” is pushed into the previous tab and not into Tab2?

goToTab2() {
//Here, we need to jump up to the parent nav
//basically the tabs page
//and call select form the Tabs api
this.nav.parent.select(1)
this.nav.push(LoadDifferentTab2Page, params, { animate: true });

}

:confused:


#4

Hello, have you found a solution to this? Thank you!


#5

I didn’t find a real proper solution. I did something with the events to make it kind of work. Hope to find an official solution. :slight_smile:


#6

In my case I’m in a page0 in tab0 and want to change to tab2 and push page2 so when the user clicks the Back they go to the root of tab2. I had to use setTimeout because the tab change seems to happen async. But this is very fragile…

@Component({
 selector: 'page-maps',
 templateUrl: 'maps.html'
})
export class MapsPage {
...
  changeTabPage(map: Map) {
    this.navCtrl.parent.select(2);
    setTimeout(() => {this.navCtrl.parent.getSelected().push(CourseEditPage, map)}, 100);
  }
...
}

There is a tab selected event that is fired and contains the selected tab. I guess I could push the desired page into the Tab so when it changes it could do the page push and then delete the desired page data. At least then it won’t rely on the speed of the tab change.


#7

try this, it worked for me in my project:

import { App } from 'ionic-angular';

@Component({
 selector: 'page-maps',
 templateUrl: 'maps.html'
})
export class MapsPage {
  constructor(private appCtrl: App) { }
...
  changeTabPage(map: Map) {
    this.appCtrl.getRootNav().getActiveChildNav().select(2);
    this.appCtrl.getRootNav().getActiveChildNav().getByIndex(2).push(CourseEditPage, map);
  }
...
}

#8

What was the solution you tried? I tried to publish and event but once I’ve navigated away to the other page the event doesn’t seem to register. How did you get it working?


#9

Did you figure out a better solution in the end up? I tried this solution here and it appeared to work, but I didn’t really understand how it worked. What’s actually going on with the setTimeout() line of code?

Thanks! :slight_smile:


#10

That approach was working fine. I also “solved” the problem by removing the tabs from my app - I needed the screen space on small screens.

setTimeout (https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) delays running the anonymous function by 100ms. It’s a hack. So tab number 2 is selected and the code to perform the ‘push’ of the new page is queued up and will run approximately 100ms after the select() is started.

AFAIK setTimeout() lets the main JS thread run so the select() will be performed (that will cause navCtrl.parent’s selected tab to be updated). Then calling parent.getSelected() should return the newly selected tab. So then the push() happens on that tab instead of the previously selected tab which is what would have happened if you didn’t use setTimeout().

If select() was blocking or had a Promise interface you wouldn’t have to use this hack.

Hope this helps.


#11

Great, thank you so much.


#12

Works like a charm!

I’ve been dealing with this for a while as well:


The only problem is that it’s open this tab and after the page, doing a weird transition


#13

Try
changeTabPage(map: Map) {
this.nav.parent.select(0).then(() =>{
this.nav.parent.getSelected().push(CourseEditPage, map);
});
}