-
Notifications
You must be signed in to change notification settings - Fork 13.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ionic page constructors are executing multiple times #5960
Comments
Hello! Thanks for opening an issue with us! I am having trouble reproducing this issue with the exact steps you listed above. Would you be able to maybe give me a full sample of the code your having this issue with? Thanks again! |
See below sample code... You can also download the full code from my webspace cutePuppyPics.rar App.js
` First Page
` Second Page
` |
Sorry, forgot to mention, the navigation is from the menu. I.e navigate to page2 from menu and back to page1 from the menu. Thanks |
Tested on Device... Same issue |
Hello, can you please advise on this? Thanks |
Hello! Sorry it has taken so long to get back to you. So i made a plunker (http://plnkr.co/edit/mJQG4dy3uqaZlQUQfvFZ) for you to check out that i think might help with some of the theory behind this issue. So you will see from my plunker that an alert is set in the constructor of the home page (the first page you see) and the page that is navigated too when you hit the thanks! button (page 1). So if you test this plunker you will see that the constructor for the home page is only initialized once, you only see the home page alert when the app is first loaded. Now you will notice that it does alert every time page 1 is navigated too, this is expected behavior. When you click that back button on page 1 that navigates you back to the home page, it destroys that instance of the page 1 page, therefore when it is navigated to again it has to be constructed again. So to sum all this up, your root page (the page your app starts on usually) will never have to be constructed except when the app first loads, but any page that you push and then close will have to be constructed ever time it is navigated to. So with a sidemenu app such as yours, where your using setRoot every time you navigate to a page from the menu is gonna "reset" that page every time it is navigated too because its setting it as root, therefore causing it to be constructed every time it is navigated too. This is expected behavior and should not cause any issues with your app. I hope i explained all this well! Thanks for using Ionic! I am going to close this issue for now as i believe the above should clear it up, but feel free to comment still! |
Hi Justin, So I modified the plnkr and I tried putting the code below in Page1. Seems import { IonicApp, Page, NavController } from 'ionic-angular/index'; @page({
} Ebenezer Isaac Confidentiality Notice: This e-mail, including any attachments, is for the On Thu, Apr 28, 2016 at 11:41 AM, Justin Willis notifications@github.com
|
Hey! So yeah, since your doing a setRoot on the home page it is going to be reconstructed when you navigate to it because its being reset as the root and has to be reinitialized. |
Thanks Justin, Is there a documentation that shows how to navigate through the app without How would one achieve this? Ben
|
@nikiben so if your on your root page and you navigate to a different view, then to get back to your root page all you have to do is use |
@jgw96 I notice this happens as well with the Ionic menu starter tutorial project https://github.com/driftyco/ionic2-starter-tutorial. The page get's reconstructed every time user clicked on menu items. But this is different in Ionic 1. My concern is that if I have an http call or if i'm loading some sort of data on a pop and push page that means i will be loading the resource(s) everytime I visit that page (since the instance will be destroyed). I just want to load the data once until it's refreshed by user. Is there a way to workaround this? |
@jgw96 is there a reason that NavController setRoot can't cache other root pages that have been used and replaced by other pages? I agree with @nikiben that it is not ideal to have to recreate a page (along with model data, data retrieval, etc) every time it is set as root on the NavController. |
hmm |
I'm having a similar issue but I call setRoot() only once! the component looks like this:
these are the logs even though there is only one this.nav.setRoot(Chats); call. The Constructor is called twice, once at NavControllerBase._setPages and once at NavControllerBase._trnsFinish
|
@jgw96 I have a similar issue when I logout then login again to my app. I use Whenever I logout and login again, the constructor of In the first time, I only login, and the The only workaround I can think of is using |
Hi, some ideas? KR Pitt |
Hi @jgw96, Thanks in advance |
Same problem. Using setRoot based on auth state. constructors running multiple times if I use tabs. |
Though it is intended behaviour right now, I reckon ideally there should be an option for the developer whether to retain the page\view as-is in memory or whether he\she wants to reload it every time he\she land up on the page. A property on ionic page like 'destructionPolicy' which can take values as 'auto' or 'never' would help. That's just me though ;) Thanks for ionic2... |
@megharajdeepak I do not thing it is intended that when you call setRoot once it will trigger the construct multiple times. |
Just passing by, try wrapping zone.run to setRoot See more about this: |
Going back and forth between pages seems to create multiple copies of the pages, each one active behind the scenes, even if the parameters are different. I am using socket.io, and receiving the same message multiple times on the messages page. If I go back and come back to the messages page, the new message will show up one more time than the last time. |
@chanphillip many thanks for passing by ! Your suggestion worked perfectly, root pages aren't duplicated anymore. I wish we had a proper explanation as to why this happens, I'm still a bit puzzled myself but it's good to know that we've got a workaround. Cheers ! |
I seemed to run into this problem when implementing links in the url // caused my controllers to be loaded twice // only loaded once as expected something happening with Ionic taking over routing . |
I am still facing this issue, also in a login - logout cycle where the contructor (and ngOnInit) are executed multiple times (actually the entire page is rendered multiple times) and the amount of times keeps increasing everytime the cycle happens, it resets when the app or page is reloaded. So basically the same thing as people mentioned before me. |
I am also facing the same issue. Is there any workarounds? I tried the method mentioned by @chanphillip but unfortunately it's not working for me. If there are any other workarounds or methods to fix this please share here. This issue is killing my app navigation. |
I have the same issue, the @chanphillip workaround its not working :/ |
i have same issue any one have solution? |
I have the same issue. This has been opened for more than 2 years and this is a common piece of funcitonality, login/logout. How should this be performed so that multiple observers are not created. subscription to platform.resume is created each time a page is loaded. |
Same here, any solutions? |
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Short description of the problem:
The constructor execute when user navigates from page1 to page2 and then back to page1 (the second time), so the constructor executes every time user navigates to different page that has already been loaded. The configurations, models and variables are been reset or re-initialized.
What behavior are you expecting?
I was expecting the constructor to init just once when the page loads, not every time user navigates to already loaded page.
Steps to reproduce:
Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
Which Ionic Version? 1.x or 2.x
$projectfolder>ionic -v
Ionic 2.0.0-beta.19
Run
ionic info
from terminal/cmd prompt: (paste output below)Your system information:
Cordova CLI: 5.4.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS:
Node Version: v5.4.1
The text was updated successfully, but these errors were encountered: