How to nav.push outside an ion-tabs?


#1

Hi,

Here my situation:

I have a Tabs page where one tab has a list of items. When clicking on one item, I want to get out from the Tabs page and go to the new Page and still keep the navigation history. Right now, the new Page is displayed inside the Tab where I click the item.

Any suggestion?

Here a code summary of what I have. you will see that I have a ion-navbar in the Tabs.html. The reason is I have other pages before showing the Tabs.html and I want to be able to go back to previous page. That’s the only solution that I found so far.

Tabs.html

<ion-navbar>
  ...
</ion-navbar>

<ion-content>
  <ion-tabs>
    <ion-tab [root]="tab1"></ion-tab>
  </ion-tabs>
</ion-content>

Tab1.html

<ion-content>
  <ion-list>
    <button ion-item *ngFor="#item of items" (click)="itemClicked(item)">
      {{item.id}}
    </button>
  </ion-list>
</ion-content>

Tab1.ts

itemClicked(item) {
  this.nav.push(Page1);
}

Tabs navigation issue
#2

Nobody experience that kind of situation and found a solution?


#3

The issue seems to be only on the Chrome iPhone “emulator”.

I am using Chrome to simulate it and does not get the issue on the Google Nexus “emulator”.

I also tried on a real BB10 phone and the interface used is the iphone and see the same issue.


#4

Did somebody tried it on a real iPhone to see if it is a Chrome behavior only or not?


#5

Here some screenshots

iOS: you can see at the bottom I have 2 tab bars. The one from the main window and the one from the new Page containing another tab bar.

Android version


#6

I have this same issue… but the opposite is my case.
I want the page to open inside the tab.

It opens inside the tab on the chrome iOS emulator, but opens outside the tab on the android


#7

I’m also running into this issue.


#8

+1
running into the same issue


#9

So you need to grab the parent nav in order to push outside of the tabs. Using the conference app as an example, in app.js (*.ts if you’re using typescript), to open a page from the side menu we use:

let nav = this.app.getComponent('nav');

nav.setRoot(page.component);

some of the code was removed for the example

So in schedule.js you could call goToTutorial() on a button click in order to navigate to the TutorialPage:

static get parameters() {
  return [[IonicApp], [NavController], [ConferenceData], [UserData]];
}

constructor(app, nav, confData, user) {
  // all of the constructor code
}

goToTutorial() {
  let nav = this.app.getComponent('nav');

  nav.push(TutorialPage);
}

or you can use nav.setRoot to get rid of the history. Let me know if any of that isn’t clear! :smile:


#10

Hi @brandyshea,

Working like a charm! Thanks!

Would you mind to explain my what is the use of

 static get parameters() {
  return [[IonicApp], [NavController], [ConferenceData], [UserData]];
}

#11

We should probably add this to the FAQ as well, but this is only if you’re using JavaScript and not Typescript:

Angular2 is written in TypeScript, and normally depends on types to know what kind of objects to inject into class constructors as part of its dependency injection framework. Since these examples are in JavaScript and not TypeScript, we need a way to tell Angular what “types” of objects should be injected, without actually using types. The way we do this is with the static getter parameters which attaches this type information to the class.


#12

Ok, understood.

By the way, the forum should have a way to tell the topic has been solved with a solution. Unless I did not see the way to do it?


#13

edit the title to begin with [SOLVED] ?


#14

I know, but I don’t see the pen that allow me to edit it! You know how to get it back?


#15

It actually wasn’t enabled, but I just enabled it. You can now click on the checkmark on a reply to select it as the solution.


#16

Hi @brandyshea,

I just upgraded to beta 5 and the issue occurs when coming back from the Tab page.

I have this error on the console:

EXCEPTION: TypeError: this.parent.unregisterChildNav is not a function

Any clue?

Thanks


#17

To get new Page to open within the Tab contents on Android Chrome emulator I had to do edit @App config:

config: {      
    tabSubPages:false
}

p.s. using beta.6


#18

hey @icarus_31, that should be fixed in beta.6 by this issue (it was a quick release):


#19

Yes, I saw that. I did not expect to get the beta 6 that soon! :slight_smile:
thanks


#20

Hi @brandyshea,

How would you replace the suggested code that you gave my last time? The getComponent is no more available with beta 7 :frowning:

Thanks in advance