this.nav is undefined - Ionic2

Question

I'm having a problem with this piece of code here:

import { Component, ViewChild } from '@angular/core';
import { Nav, NavParams } from 'ionic-angular';
import { Page1 } from '../page1/page1';
import { Page2 } from '../page2/page2';
import { Login } from '../auth/login/login';
@Component({
    templateUrl: 'home.html'
})
export class Home {
    @ViewChild(Nav) nav: Nav;
    rootHomePage: any = Page1;
    pages: Array<{title: string, action: any}>;
    user = this.navPrm.get('auth').current_user();
    constructor(public navPrm: NavParams) {
        console.log("TesteTesteTesteTesteTesteTesteTesteTesteTeste");
        console.log(this.nav);
        // used for an example of ngFor and navigation
        this.pages = [
            { title: 'Page One', action: this.openPage(Page1) },
            { title: 'Page Two', action: this.openPage(Page2) },
            { title: 'Logout', action: this.user.logout() }
        ];
    }
    openPage(page) {
        // Reset the content nav to have just this page
        // we wouldn't want the back button to show in this scenario
        this.nav.setRoot(page);
    }
}

So, on the openPage() method, the this.nav (the nav is declared above) is returning an error: this.nav is undefined. Someone has any idea why?

http://stackoverflow.com/questions/34947154/angular-2-viewchild-annotation-returns-undefined perhaps this link helps to figure out the nullpointer exception — TypedSource, Apr 19 '17 at 21:10

score 1 · Accepted Answer · answered Apr 19 '17 at 18:10

1

Try this.nav.rootNav.setRoot(page). This should work. It works for me.

One more thing, isn't user = this.navPrm.get('auth').current_user(); is supposed to be inside the constructor when you are retrieving the value from navParam. (Since, I am not familiar with your code, not sure about this part though. Just seemed wrong.)

answered Apr 19 '17 at 18:10

Sagar Kulkarni

2,072
2
16
25

The problem resides on the this.nav... since it is undefined, I just can't access any methods of the Nav prototype... – Luan Gonçalves Barbosa Apr 19 '17 at 20:01
I have also tough this a bit weird the user statement, but it's currently working, so... kkk – Luan Gonçalves Barbosa Apr 19 '17 at 20:03
Just try to get that inside and see. I know it's a long shot, but, that could be a problem. Also, if not, you need to show the entire code. As in where are you setting this page from? Is this the start of the app? Also, show the home.html code as well. – Sagar Kulkarni Apr 20 '17 at 03:52
1

Also, if it is not start of the app, then try having `constructor(private navCtrl: NavController)` and then try `this.navCtrl.setRoot(Page)` and if it works. Also, try removing the @ViewChild and see what happens. Let me know what is the output of all these trials. – Sagar Kulkarni Apr 20 '17 at 03:55
By trying, I ended up figuring this out... But Thanks... rs – Luan Gonçalves Barbosa Apr 20 '17 at 17:30
What did you figure out? – Sagar Kulkarni Apr 20 '17 at 17:47
1

I have added `navCtrl: NavController` to the constructor and replaced from `Nav` dependencie to `NavController`, and then `this.navCtrl.setRoot(Page)` – Luan Gonçalves Barbosa Apr 20 '17 at 18:06

this.nav is undefined - Ionic2

1 Answers1