Change Ionic 2 program code

Question

I have an Android project that I would like to change the root page dynamically determined if the user is registered or not.

At app.component.ts. I check local storage for a flag that determines if the user is logged in. If they are, he transfers them to the second page and does not show the login page. If it is not, he shows them the login page.

My problem is that the local GET repository is Promise and it finishes the app.component.ts constructor before it has the opportunity (it goes to the login screen and shows it), then when Promise is finished, it switches to the second screen. I don’t want to show the login screen at all if they are already logged in.

I tried everything and can not figure it out. How to change the root page loaded based on the state of a value in local storage?

Answer 1

New solution, now a little more elegant. I only install the root programmatically after I get to the repository and check if it should display Home or Login.

@Component({ template: `<ion-nav #nav></ion-nav>` ) export class MyApp { @ViewChild('nav') nav: Nav; constructor(platform: Platform, storage: Storage) { this.storage.get('isLogged').then(logged => { if (logged) { this.nav.setRoot(HomePage); } else { this.nav.setRoot(LoginPage); } }); } 

Before editing

Not an ellegant solution, and I will see if there is a better way, but in my case I delayed showing the root with * ngIf.

My AppComponent looks something like this:

 @Component({ template: `<ion-nav *ngIf="showRoot" [root]="rootPage"></ion-nav>` }) export class MyApp { rootPage:any = LoginPage; showRoot = false; constructor(platform: Platform, storage: Storage) { this.storage.get('isLogged').then(logged => { if (logged) { this.rootPage = HomePage; } this.showRoot = true; }); } }