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.
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!
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.
on a reply to select it as the solution.
