Only showing white screen, provider for NavController not found


#1

So what I’m trying to do is simulate a logout from my HomePage

Here’s the error:

My sidebar is in my app.html Here’s the code:

<ion-menu [content]="sidebar">
<ion-content>
  <ion-list padding>
    <button menuClose ion-item (click)="logout()"><ion-icon name='exit'></ion-icon> Logout</button>
  </ion-list>
</ion-content>

I created the function logout in my app.component.ts Here’s how it looks like:

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

rootPage:any = LoginPage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private navCtrl:NavController) {
platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  statusBar.styleDefault();
  splashScreen.hide();
});
}

logout():void {
    localStorage.removeItem('token');
    localStorage.removeItem('public_id');
    localStorage.removeItem('role_id');
    this.navCtrl.setRoot(LoginPage);
}

}

What am I missing here? Am I supposed to create and export a new class and create a new constructor?


#2

Where do you call the logout() function?
Also how do you import NavController?

try this:

export class MyApp {
@ViewChild('myNav') nav: NavController // <--- Reference to the Nav

rootPage:any = LoginPage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private navCtrl:NavController) {
platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  statusBar.styleDefault();
  splashScreen.hide();
});
}

logout():void {
    localStorage.removeItem('token');
    localStorage.removeItem('public_id');
    localStorage.removeItem('role_id');
    this.nav.setRoot(LoginPage);
}
}

and in your app.html:
<ion-nav #myNav [root]="rootPage"></ion-nav>

Also dont forgett to import “ViewChild” to get it to work.


#3

yes I just discovered what ViewChild is. It’s working properly now thanks :slight_smile:

On another note though, I want to put a custom alert here in my app.component.ts. Should I put it in my app.scss file?