How to nav.push outside an ion-tabs?

Ionic Framework ionic-v3
21

The code has been updated in the conference app to use ViewChild. Here it is for app.js:

https://github.com/driftyco/ionic-conference-app/blob/master/app/app.js#L24-L26

and in TypeScript:

Let me know if that’s not what you meant. :slight_smile:

1 Like
22

Hi @brandyshea, my “nav” variable is undefined when doing this.nav.

Though, when I checked the “nav” where it is defined “@ViewChild(Nav) nav: Nav;” it gives me something!?

1 Like
23

Hello I’m also facing the same issue. I get two tabs in ios, doesn’t happen in Android and windows.

24

Anybody has idea to solve the issue where “nav” is considered as undefined?

1 Like
25

I am also having the same problem. Using beta.8 “nav” is undefined and gives an error.

26

I’m also having the same problem.

@ViewChild(Nav) nav: Nav;

.
.
.

openPage(page) {
  this.nav.setRoot(this.ext_page.component);
}

(index):29 TypeError: Cannot read property 'setRoot' of undefined

@brandyshea any clues on this?

27

I got it working using the following code:

constructor(
    private navController: NavController,
    private menu: MenuController
  ) {
    this.ext_page = { component: page3_Root };
  }

and then …

openPage(page) {
  this.navController.rootNav.setRoot(this.ext_page.component);
}

Look that i’m getting the current view and then accessing the rootNav instead of getting the rootNav with @ViewChild(Nav) nav: Nav;

Is there a way to get the rootNav by name? @ViewChild('content') nav; maybe? This would be super useful when you have multiple rootNav’s

28

Hi!
Any news on this?

Still having

(index):29 TypeError: Cannot read property 'setRoot' of undefined

I have a page with tabs and on the toolbar I have a help button that opens a new page. This new page is showing up with the tabs from the previous one.
Since this is only a help page I need to go back with a back button.

1 Like
29

With ionic-angular 2.0.0-beta.11, things have changed a bit.
The workaround I did was, In my tab component constructor, injected App and uses it to get the root nav as follows:

@Component({
  templateUrl: 'build/pages/requests/a.html',
})
export class aTab {

  constructor(private navCtrl: NavController, private app: App) {
  }

  goToLoginPage() {
    this.app.getRootNav().setRoot(LoginPage, {}, {animate: true, direction: 'forward'});
  }

}

This helps come out of the tabs nav and create a new nav stack.

11 Likes
30

I had the same issue. This was my fix:

@Component({
  template:  '<ion-nav></ion-nav>',
})
export class MyApp {

  constructor(private events:Events) {

    platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }

  ngAfterViewInit() {
    this.events.subscribe('event:logout', ()=>{
      const ANIMATION = { animate: true, direction: 'back' };
      this.nav.setRoot(LoginPage, null, ANIMATION);
    });
  }
}


@Component({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {

  private tab1Root: any;
  private tab2Root: any;
  private tab3Root: any;
  private tab4Root: any;

  constructor(private events:Events) {
    this.tab1Root = HomePage;
    this.tab2Root = AboutPage;
    this.tab3Root = NotificationPage;
    this.tab4Root = SettingsPage;
  }

  /**
    * move user to the login page
    */
  private logOut():void {
    console.warn('TODO: Show message when to let user know why he has been taken to the login page');
    this.events.publish('event:logout');
  }

}
3 Likes
31

you could not have come at a better time!! I had the same issue and this worked perfectly!! Thank you.

1 Like
32

w00t! Your solution was the only one that worked for me!!!

1 Like
33

this isnt working for me. im using ionic2 Rc1
please help!!!

34

Works for me rc.1 - thank you, saved me a massive headache!

@raymondativie have you also added the following?

import { App } from 'ionic-angular';

And then in your constructor…

constructor ( private app: App ) {}

1 Like
35

Answering the original question, how to navigate to a single item from a tab, but still keep navigation history. The piece your looking for is this.app.getRootNav().push() which is used in the example below.

import { Component} from '@angular/core';
import { App } from 'ionic-angular';

@Component({
  templateUrl: 'lists.html',
})
export class ListsTab {

  constructor(private app: App) {
  }

  goToSingle(listId:number) {
    this.app.getRootNav().push(SinglePage, {listId: listId});
  }

}
26 Likes
36

import { App } from ‘ionic-angular’;

function(){

let nav = this.app.getRootNav();
nav.push(YourPage});
}

This works perfect. PROBLEM SOLVED.

10 Likes
37

This is exactly what I was looking for. Thank you! :slight_smile:

39

thanks bro! save me a lot.

40

That solves it! Thanks

41

Thanks, it works on rc4 too