Ionic 2/3 :Dynamically set RootPage - ionic2

Question

I have a scenario where I have 2 profiles (user and admin) and I have a selection page once a person logs in. On the selection page, there are 2 radio buttons for (User and Admin profiles), what I am trying to achieve is, the person can choose only 1 profile (this is achieved by the radio button), now assuming I have saved the selected value, I want to set the rootPage to AdminPage or UserPage, but I don't want to immediately navigate, I just want to update/set the path so that when the person goes back (by pressing the back key or previous button) it will take the person to the desired page. Please let me know your thoughts.

Answer 1

Maby this will put you in the right direction:
https://ionicframework.com/docs/api/navigation/NavController/#insert
do not set adminPage or userPage as rootPage but insert the page on the stack

Answer 2

The trick here is that you want to set the root to a new page after the user tries to go back, the easiest way to achieve this is using the NavController navguards to execute a code before leaving the page, this way it'll check wich page the user has selected and then set the root.
Since the select can be easy impemented following the docs i'll leave that aside. Let's just say you have a property userType that is a string and can be 'user' or 'admin', in your select page you'll do the following:
public canLeave: boolean = false; //this'll controll if the user can leave the page or not
public userType: string = 'user'; // just setting a default value to your select
// this is a navguard
ionViewCanLeave() {
if(!this.canLeave){
if(this.userType == 'user'){
this.canLeave = true; // you'll need to set canLeave to true so when setting the rootpage it doesn't enters the if statemente again
this.navCtrl.setRoot('UserPage');
} else {
this.canLeave = true;
this.navCtrl.setRoot('AdminPage');
}
}
return true;
}
Hope this helps.

Answer 3

I got the solution to the error,
ionViewCanLeave() {
if(!this.canLeave){
if(this.userType == 'user'){
this.canLeave = true; // you'll need to set canLeave to true so when setting the rootpage it doesn't enters the if statemente again
this.navCtrl.setRoot('UserPage'); // <-- this should be UserPage instead of 'UserPage'
} else {
this.canLeave = true;
this.navCtrl.setRoot('AdminPage'); // <-- this should be AdminPage instead of 'AdminPage'
}
}
return true;
}