ionic-framework: navController.setRoot(Page) does not work inside a popover
Short description of the problem:
When trying to navigate to a new page via an anchor click and call navController.setRoot(Page) inside a popover, the new page is not displayed. If navController.push(Page) is used instead, the page is displayed. Tested with Firefox, Chrome and Android 5.0.
What behavior are you expecting?
I expect the page, set via navController.setRoot inside the popover component to show up.
Steps to reproduce:
- Create a new project, based on the tabs template: ionic start ProjectName --v2
- Add a button, which opens a popover on the home page’s header.
- Inside the popover page, add an anchor, which on click must navigate to other page: this.navController.setRoot(Page);
- When this anchor is clicked, the new page is not displayed.
Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc) A repository, which demonstrates the problem can be found here.
Which Ionic Version? 1.x or 2.x 2.0.0-rc.0, 2.0.0-rc.1
Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: LinuxMint Description: Linux Mint 18 Sarah
Node Version: v6.7.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 2
- Comments: 15 (2 by maintainers)
Hello @pdrosos and @devarg, sorry for the delay on this! So the correct method to use to setRoot on the “base” page from a popover is this
this.app.getRootNav().setRoot(SupportPage);. This will get theNavControllerof the base page (not the popover) and run asetRooton thatNavController.For beginners like me who didn’t understand where
this.appcomes from (in the previous comment), you need to injectAppin the popover’s constructor (constructor(protected app: App){}andimport {App} from "ionic-angular";). Hope it helps!@jgw96 @manucorporat I still get a white screen of death if I try to redirect using setRoot from anywhere other than a root level page.
Bottom line is this issue should not be closed. It is still present. See gif below when redirecting from a 2nd level page in:
My app receives a logout event in the app.component class and does exactly as stated above:
this.app.getRootNav().setRoot(LoginPage)Yet, as you can see, I get a white screen of death. When i switch tasks using the system button, the page is rendered again.
same problem with a popover. The new page is loaded (when I check the DOM I can see it) but the ‘old’ page is still displayed. It seems that the page from which the popover has been invoked is not destroyed, as you can see here :
The “app-root” is the old page (that was hosting the popover and that should not been displayed anymore) and the “ion-page” is the page that should be displayed.
It worked on beta-11 but not on RC-0