Create Logout tab that on click pops back to the root

Ionic Framework ionic-v3
1

How can I put a logout button tab that pops back to the root of my application?

So far I have tried but onclick doesn’t seem to work with ion-tab.

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Events" tabIcon="calendar"></ion-tab>
  <ion-tab (click)="logout()" tabTitle="Logout" tabIcon="exit"></ion-tab>
   </ion-tabs>

logout() is a function in my tabs component that calls this.navCtrl.pop() where navCtrl is a NavController object

2

I think the simplest way would be to simply replace this.navCtrl.pop() with this.navCtrl.setRoot(MyRootPage);.

3

The problem with .setRoot within the Tabs component is it changes the current tab but does not allow you to leave the tab and navigate to that separate component.

4

you need to get the parent nav first. try something like this:

let parentNav = this.app.getComponent('nav'); parentNav.setRoot(MyRootPage);

5

Personally I think this is a bad road to go down. Components should stick do doing things within their sphere. I would instead expose an observable in a service that fires boolean values indicating authentication status. The logout() function could inject this service and tell it we are no longer authenticated. The application class can subscribe to the authentication notifier and change its rootPage property appropriately. I find that much cleaner than messing around trying to get handles to navigation controllers beyond one’s natural scope.

6

When I use your solution I get the following error present. Error TS2341: Property ‘getComponent’ is private and only accessible within class ‘App’.

7

@rapropos you are right!

@ViewChild(Nav) nav: Nav;

8

can you show me an example of using the @ViewChild. I have never used that before.

9

follow the link i gave you. it has an example or look for the ionic conference app on github

1 Like