The flow of my app means that there are no tabs in place until a user logs in. The first page is a full-screen login screen. Once logged in the user is taken to tabs.ts
which holds my tabs code.
One of the tabs has a button in that logs users out:
user.ts:
// Logout
logout() {
// Log the user out
this.user.logout();
// Take user to login screen
this.navCtrl.setRoot(LoginPage);
}
I thought that setting the root to LoginPage
, which isn't part of any tab page, would remove the tabs. Unfortunately not, and the tabs remain. This is really problematic for obvious reasons.
How can I remove the tabs from this point? I feel like I need to potentially grab the tabs instance and destroy it, but that's a guess and I'm struggling to find anything in the docs.
The ion-tab-button and ion-tab above are linked by the common tab property. The tab property identifies each tab, and it has to be unique within the ion-tabs . It's important to always set the tab property on the ion-tab and ion-tab-button , even if one component is not used.
Tabs are a top level navigation component to implement a tab-based navigation. The component is a container of individual Tab components. The ion-tabs component does not have any styling and works as a router outlet in order to handle navigation.
If you just want to change the text that appears as the tab link, then go to src/pages/tabs/tabs. html and in that file change the tabTitle to whatever text you would like to display. For example, when you create new tabs template and you want to change the 'about' tab to 'settings'.
After posting this I found the answer on the Ionic forums.
Effectively, each tab maintains its own navigation stack, which I was aware of but I expected the setRoot
to bypass the stack. Logically, it does not.
Instead, you need to call getRootNav().setRoot()
on your App
.
App
is imported from ionic-angular
, and then passed to your controller.
A full (albeit truncated) example:
import { Component } from '@angular/core';
import { App } from 'ionic-angular';
@Component({
selector: 'page-profile',
templateUrl: 'profile.html'
})
export class ProfilePage {
constructor(
private app: App
) {
}
// Logout
logout() {
// Take user to login screen
this.app.getRootNav().setRoot(LoginPage);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With