In my app I have 3 tabs. In the first tab there is a list that pushes to another page (inside the same tab, so the tabs remain at the bottom). When I switch to another tab, and I go back then to the first tab I am still at that subpage.
Is there a way to go always to the root. The problem is that inside the child-page I have also links, so the solution on Ionic 2 - How do I get back to the start page of a given tab did not work for me, as he redirects me also to the root when I click open a new page in the child.
Any other solutions?
I'm not sure if this would be the best way to fix that, but it should work. Suppose this is the page that contains all the tabs:
<ion-tabs>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(0)" tabTitle="First tab"></ion-tab>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(1)" tabTitle="First tab"></ion-tab>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(2)" tabTitle="First tab"></ion-tab>
</ion-tabs>
And in the component code:
import { Events } from 'ionic-angular';
// ...
constructor(public events: Events) {}
public onSelected(index: number): void {
if(index) this.events.publish('TabSelected');
}
So basically, we're publishing an event when the user selects any tab other than the first tab (index equal to 0).
The in the FirstTab, we can subscribe to that event, and use this.navCtrl.popToRoot() to close the opened pages inside of that tab:
// FirstTabCode
import { NavController, Events } from 'ionic-angular';
// ...
constructor(public navCtrl: NavController, public events: Events) {
this.events.subscribe('TabSelected', () => { this.navCtrl.popToRoot(); });
}
ngOnDestroy() {
this.events.unsubscribe('TabSelected');
}
Related
Pages structure is: Tabs(page1,page2,page3).
When I click a button within in page1, I want to go to page4,
but now we still can see tab, how to make page4 displays as a normal page and can back to tabbed page.
In page1, I use below line to go to page4
this.navCtrl.push(page4);
I think you could first try the following, which is for test only to understand
that this is achievable:
pass params to the ion-tabs like this:
<ion-tabs>
<ion-tab [root]="tabMap" [rootParams]="tabParams" tabIcon="map"></ion-tab>
<ion-tab [root]="tabList" [rootParams]="tabParams" tabIcon="list"></ion-tab>
</ion-tabs>
Prepare the params in the tabs.ts like this:
ionViewWillEnter() {
this.tabParams.parentNav = this.navCtrl;
}
So in the inner page (page1, 2, 3) you can retrieve it, place it in a variable e.g. parentNav, and when you want to navigate out of the tabs page to do a this.parentNav.push(page4).
The proper way I think is to use events events: ionic forum
So in the tabs.ts page you could have this piece of code:
events.subscribe('tabs:newPage', (page) => {
this.navCtrl.push(page);
});
And in each page, or in a service you could have:
newPage(page) {
console.log('navigate to a new page, not a tab')
this.events.publish('tabs:newPage', page);
}
What ionic is ?
If lazy loading,maybe ionic 3 , hod did you declare page4?
You have to push it like this : this.navCtr.push('page4');
If is all ok try this (it 's extracted form an app example) :
static get parameters() {
return [[IonicApp], [NavController], [ConferenceData], [UserData]];
}
constructor(app, nav, ...) {
// all of the constructor code
}
tourFunction() {
let nav = this.app.getComponent('nav');
nav.push('page4');
}
Ref
I have a problem where when I call this.viewCtrl.dismiss(); and this.navCtrl.push(HomePage); in my function, the tabs at the bottom of the page disappear
So I have 3 pages/modal:
page1: home page, page2: modal, page3: second page
I navigate from my home page to the modal which has two actions(accept or reject)
If the user accepts then go to the second page, if the use rejects then go back to the home page. When the user accepts everything works as expected however if the user rejects then the app hides the tabs at the bottom of the page
My code for the reject button navigation is as follows
Modal page
gotoHome(){
this.viewCtrl.dismiss();
this.navCtrl.push(HomePage);
}
Second page
calling modal in constructor
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage) {
let myModal = this.modalCtrl.create(modal);
myModal.present();
}
My TabsPage is default as per Ionics Tabs Layout App
You don't need to push the homepage from the modal since, you said, you are going back to homepage.
Change in modal.ts
gotoHome(){
this.viewCtrl.dismiss();
this.navCtrl.push(HomePage);
}
to
accepted: boolean;
....
accept(){
this.accepted = true;
this.dismiss();
}
reject(){
this.accepted = false;
this.dismiss();
}
dismiss(){
this.viewCtrl.dismiss(this.accepted);
}
Call the accept() when accepted and reject() when rejected
Handle your actions after dismissing view by
let myModal = this.modalCtrl.create(modal);
myModal.onDidDismiss( accepted => {
// your actions here
console.log(accepted);
if(accepted){
this.navCtrl.push(SecondPage);
}
});
myModal.present();
I created an example here on stackblitz
I am new to ionic2, I want to remove tabs from specific page.
I am using below code :
import { NavController, App } from 'ionic-angular';
constructor(public navCtrl: NavController, public app: App){
this.navCtrl.push(MainPage);
}
but whenever using above code all pages tabs are removed.
I want to remove specific page only.
Please help me....
You can hide tabs on sub pages of a tab by using the tabsHideOnSubPages attribute:
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Contacts" tabIcon="contacts"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Profile" tabIcon="information-circle" tabsHideOnSubPages="true"></ion-tab>
</ion-tabs>
This will not show tabs for sub pages within this tab.
Also you can just add “tabsHideOnSubPages: true” to your app.module.ts config
IonicModule.forRoot(MyApp,{ tabsHideOnSubPages: true })
I am trying various solutions from Google but all of them seems to be for Ionic 1 and other versions of Ionic and Angular.
HTML
<button class="edit" (click)="goBackToEnhancementPage();">Edit</button>
On button click I want to goto to the previous state in the history
TypeScript
This is the current state
export class BookingConfirmationPage {
//Some properties
constructor(public navCtrl: NavController, public navParams: NavParams ) {
//Some codes
}
goBackToEnhancementPage(){
canGoBack();
}
}
Previous State
export class BookingEnhancementPage {
//Some code
constructor(public navCtrl: NavController, public navParams: NavParams, public loadingCtrl: LoadingController, private formBuilder: FormBuilder ) {
//This is previous state
}
}
This doesn't work. Please advise what am I doing wrong?
I'm guessing from your question you are trying to use navController to go back to your previous state, aka "back" function.
The way ionic navigation works is like a stack, new pages will be pushed to the top of the stack via "push" via pages will be removed from the top of the stack via "pop"
To go back to your previous state, u can use :
this.navCtrl.pop();
But before that make sure you have push your previous page into navController or you have setRoot your "BookingConfirmationPage" page.
You might want to read up on : https://ionicframework.com/docs/v2/api/navigation/NavController/
If you want your previous details in BookingEnhancementPage to be filled with your user's previously entered data, you might want to use a combination of localstorage and onPageBeforeEnter/onPageWillEnter to populate the fields.
I am using tabbed view in my Ionic 2 RC0 App. When I do this.nav.push the new page is getting opened in the tab instead of opening as a new page? What am I doing wrong here?
export class Tab1Page {
constructor(public nav: NavController) {
}
editRecord(index){
this.nav.push(MyCustomPage, {indexoEdit: index});
}
}
If you do not want to see tabs when navigating to a subpage then set tabsHideOnSubPages to true in your config. See the docs below:
https://ionicframework.com/docs/v2/api/config/Config/
You can try in this way
constructor(public nav: NavController,private app: App) {
}
editRecord(index){
this.app.getRootNav().push(MyCustomPage, {indexoEdit: index});
}