Page Navigation Issues

Ionic Framework ionic-v3
1

i have this two pages but after it pushes to the other page, it loads it then refreshes it and the page becomes blank. Does anyone know why this is happening. Im using ionic2

This is my code

app.component.ts

import { Component } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { StatusBar } from ‘ionic-native’;

import { ProfilePage } from ‘…/pages/profile/profile’;
import { LoginPage } from ‘…/pages/login/login’;
import { AuthService } from ‘…/services/auth/auth.service’;

@Component({
template: <ion-nav [root]="rootPage"></ion-nav>
})
export class AuthApp {
rootPage: any = ProfilePage;

constructor(platform: Platform, private auth: AuthService) {
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();

  // Schedule a token refresh on app start up
  auth.startupTokenRefresh();
});

}
}

profile.ts

import {Component} from ‘@angular/core’;
import {AuthService} from ‘…/…/services/auth/auth.service’;
import { NavController } from ‘ionic-angular’;
import { LoginPage } from ‘…/login/login’;

@Component({
templateUrl: ‘profile.html’,
})
export class ProfilePage {
constructor(public auth: AuthService, public navCtrl: NavController) {

}

ngOnInit() {
console.log(this.auth.authenticated())
if (!this.auth.authenticated()) {
this.navCtrl.setRoot(LoginPage);
}
}
}

login.ts

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
@Component({
templateUrl: ‘login.html’,
})
export class LoginPage {
authType: string = “login”;
error: string;

constructor(public navCtrl: NavController) {}
}

What am i doing wrong here that makes the login page to refresh after it gets triggered from the profile page.

2

If I understood correctly your code, you are telling your app.component to use profilepage as root but when you load profilepage you directly want to set loginpage as root right?

why not removing ngOnInit in profilepage and set loginpage as root in app-component?

rootPage: any = LoginPage;
3

Instead of checking authenticated in profile.ts, can you check for a authenticated in app.component.ts and set the root accordingly.

Like this :

rootPage: any;    
constructor(platform: Platform, private auth: AuthService) {
    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();
      // Schedule a token refresh on app start up
      this.auth.startupTokenRefresh();
      checkAuth();
    });
    }

    checkAuth(){
     if (this.auth.authenticated()) {
       this.rootPage: any = ProfilePage;
     }
     else {
       this.rootPage: any = LoginPage;
     }
    }

I guess this will solve your problem.

1 Like
4

no this gives me errors

Cannot find name ‘rootPage’.

Did you mean the instance member ‘this.rootPage’?

5

Yes, it should be this.rootPage, I couldn’t compile the code. I will edit my post! :+1: