I'm learning Ionic 2 by building a simple app, but I've ran into a problem I can't solve.

The app has a ion-nav for the login page, after logging in it goes into a tabs navigator. So the app nav would be something like:

app<Nav> {
    LoginPage,
    restrictedTabs<Nav> {
        Page1,
        ...
    }
}

My problem is I don't know how to access appNav while I'm inside Page1, so that I can, for example, logout the user and block him from "restrictedTabs".

I've tried as the docs say with @ViewChild

import {Component, ViewChild} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'page1url...'
})
export class ProfilePage {
    @ViewChild('appNav') appNav : NavController

    constructor(private _nav: NavController) {

    }

    pushNewPlace() {
        console.log(this._nav.rootNav);
        console.log(this._nav.parent);
    }

    ngAfterViewInit() {
      console.log(this.appNav);
    }
}

But appNav is always undefined, as is rootNav (which I've seen in some tutorial...). If I try @ViewChild('appNav') on LoginPage controller it works good

I'm learning Ionic 2 by building a simple app, but I've ran into a problem I can't solve.

The app has a ion-nav for the login page, after logging in it goes into a tabs navigator. So the app nav would be something like:

app<Nav> {
    LoginPage,
    restrictedTabs<Nav> {
        Page1,
        ...
    }
}

My problem is I don't know how to access appNav while I'm inside Page1, so that I can, for example, logout the user and block him from "restrictedTabs".

I've tried as the docs say with @ViewChild

import {Component, ViewChild} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'page1url...'
})
export class ProfilePage {
    @ViewChild('appNav') appNav : NavController

    constructor(private _nav: NavController) {

    }

    pushNewPlace() {
        console.log(this._nav.rootNav);
        console.log(this._nav.parent);
    }

    ngAfterViewInit() {
      console.log(this.appNav);
    }
}

But appNav is always undefined, as is rootNav (which I've seen in some tutorial...). If I try @ViewChild('appNav') on LoginPage controller it works good

• javascript
• angular
• ionic2

1 Answer 1

Because your navcontroller is local, you need to get access to the rootNav. that is done thanks to the appController. Tabs are creating a view inside the 'root' view.

In the page loaded inside one of the tabs :

First, import Nav from ionic-angular, same place as navController

import { App, NavController } from 'ionic-angular';

Be sure to have your loginPage also

import { LoginPage } from 'pages/login/login';

then provide it in your constructor :

constructor(public navCtrl: NavController, public appCtrl: App) 

now you can acces the rootnav:

this.appCtrl.getRootNav().setRoot(myLoginPage);