Change the root page on press of back button

Ionic Framework ionic-v3
1

Hello Folks,

I have a scenario here, 2 profiles (Admin and Standard)

user login(set as root) > profile selection (Admin or Standard) > assume Admin selected > Admin (set as root) > other Admin pages

Now I also want to give the user an option of choosing other profile, in this case, Standard.

I am providing a Menu > My Profile > Switch Profile Page (Admin/Standard), on the profile page I have other details too. Here the user can switch to Standard ( using radio button ), and if the user presses the back button (phone) or from Navbar, I was hoping to set the rootPage to Standard.

Here is what I tried, the selectedProfile will have selected values from the radio button.

 ionViewCanLeave() {
   console.log("ionViewEntered")
       if(this.selectedProfile == 'Admin'){
           this.navCtrl.setRoot('AdminPage')
           this.navCtrl.popToRoot();
        console.log("ionViewEntered - Admin")
      } else {
        this.navCtrl.setRoot('StandardPage');
        this.navCtrl.popToRoot();
        console.log("ionViewEntered - Standard")
      }

    return true;
  }

I am getting this error,
core.es5.js:1084 ERROR Error: Uncaught (in promise): invalid link: StandardPage

2

can you share your import line?

3

I think you are in one of these situation:

1 - You created or renamed this page and ionic build did not find the page, solution is to restart ionic serve or run ionic build again.

2 - You are not using Lazy Loading and this StandardPage does not have @IonicPage() decorator, solution is to add decorator to your page or import this page, activate Lazy Loading and remove string name like:

import { AdminPage } from '../admin/admin';
import { StandardPage } from '../standard/standard';

...

ionViewCanLeave() {
   console.log("ionViewEntered")
       if(this.selectedProfile == 'Admin'){
           this.navCtrl.setRoot(AdminPage)
           this.navCtrl.popToRoot();
        console.log("ionViewEntered - Admin")
      } else {
        this.navCtrl.setRoot(StandardPage);
        this.navCtrl.popToRoot();
        console.log("ionViewEntered - Standard")
      }

    return true;
  }

3 - Pop to root is not necessary, solution is just setRoot and close any modal that maybe is open

Hope this can help.

2 Likes
4

thanks you @leonardoss, the issue was with the string name.

1 Like
5

The string is used when Lazy Loading is activated, I do prefer to use it because I don’t need to import all the pages just declare it as IonicPage and then it will be loaded per demand :wink:

6

Agreed!, I still have to do a bit of re-work on the app to make it fully complaint with Lazy Loading, I am lucky in the sense, that I don’t have too many pages to do the changes. The article you shared was bang on time for me ! Thanks for sharing that. :slight_smile:

1 Like
7

And for new pages you can use ionic cli to generate the page, it will be automatically generated with IonicPage decorator:

for example:

ionic g page profile

:wink:

1 Like