Pop TabsPage and push LoginPage?

If you follow this idiom, there’s no need to interact with NavControllers at all.

  1. Okay, but anyway setting with NavControllers (setRoot) should not work?
  2. I will analyze the link you provided me, to study how to do so.

I know I am late to the party, and this is a few months old already.

But I think the code you are looking for is to access the root nav from the App utility class (https://ionicframework.com/docs/api/components/app/App/) using getRootNav() and pop() from there.

Ionic Tabs have a strange navigation stack (it’s not so strange when you think why). The <ion-tabs> instance is pushed to the root nav, and each <ion-tab> has its own NavController. This is so you can push as deep as you need to per tab, and simply switch to another tab without screwing up the other tab’s navigation stack.

Essentially what you want to do is this on one of your pages:

logout() {
  this.app.getRootNav().pop();
}

The <ion-tabs> is pushed to the root navigation stack, and each tab’s individual navigation stack is a child to this, so is not part of the root. Make sense?

2 Likes

Not to me. I want each element of my app to be independent, with clearly defined boundaries for interaction. Having arbitrary pages mess with the app component’s nav stack breaks that contract, so I consider it flawed design.

Unfortunately, I cannot answer for the design decisions. :wink: As for the alternative solution. I agree - I suppose it depends on how you want to handle your navigation stack. I tend to avoid interacting with the root page unless I am initialising the app, since you don’t get the advantages built into the NavController.

import { App } from ‘ionic-angular’;
import this where ur logout function is.

constructor(public appCtrl: App){}
add to contraller .

logout() {
this.appCtrl.getRootNav().setRoot(LoginPage);
}
use this and it will work.

19 Likes

That works for me. Ionic 3

1 Like

Also works at Ionic 3. thank you

1 Like

Whats up man!

It works for me!
I’m using Ionic 3

Thanks !

1 Like

Awesome
works, ionic 2

1 Like

Muito obrigado, Deu tudo certo :slight_smile:

1 Like

In your AppComponent.ts:

import { Component } from '@angular/core';

import { Config, Nav, Platform } from 'ionic-angular';

import { AuthService, ServiceWorkerService, LoggerService } from '@core/index';

@Component({
  templateUrl: 'app.component.html'
})
export class AppComponent {

  // [root]="rootPage"
  public rootPage: any = 'LoadingPage';

  // [class]="theme"
  public theme: String = 'orange-theme'; 

  constructor(public config: Config,
              public platform: Platform,
              private authService: AuthService,
              private swService: ServiceWorkerService,
              private logger: LoggerService) {

    this.initialiseApp();
  }

  private initialiseApp() {

    this.platform.ready().then(() => {
      this.swService.run();
    });

    this.authService.afAuth.authState.subscribe(user => {

        if (user) {
          this.rootPage = 'TabsPage';
        } else {
          this.rootPage = 'SignInPage';
        }
      }, () => {
        this.rootPage = 'SignInPage';
      }
    );

  }
}

app.component.html:

<ion-nav [root]="rootPage" [class]="theme"></ion-nav>

Hi@IonBruno
My suggestion is you have to use

import { App } from ‘ionic-angular’;
   this.appCtrl.getRootNav().setRoot(LoginPage);
instead of 
    this.navCtrl.setRoot(LoginPage);
2 Likes

Thank you it work for me

thx dude, this works for ionic 3 latest

using this this.appCtrl.getRootNav().setRoot(LoginPage); working fine in ionic 3,
but it hiding my side menu

Please select this as the answer as it works perfectly

2 Likes

thanks a lot, that helps

Hi, how you fix this?

Hi,Thanks Its working with ionic 5