I have a Home Page, inside that I have created one component RecentlyViewedProductComponent.
My problem is:
when I navigate to /home by using
this.router.navigate(['/home']);
the ngOnInit() inside RecentlyViewedProductComponent is not working. When I close the app and open it again, that only it is working .
How to solve this problem?
It sounds like you are not using the right lifecycle event.
Have you looked at the documentation here:
https://ionicframework.com/docs/angular/lifecycle
It says that ngOnInit() is:
Fired once during component initialization. This event can be used to initialize local members and make calls into services that only need to be done once.
If you want it to be called every time you navigate to the home page then you want to replace this with something like ionViewWillEnter():
Fired when the component routing to is about to animate into view.
There is actually some guidance at the end of the docs page that you might find interesting which explains when to use each life cycle method.
Related
I am using cdp (https://github.com/mafredri/cdp) in order to use devtools protocol to generate a pdf of a page. But first I need to know when the page is completely loaded. I found that the networkIdle event can help me to know when this occurs. But, I have troubles because the networkIdle event sometimes fired twice. Then I need to know when this one is fired
There are two parts for what you're looking for.
First of all, the reason the event is fired twice. When a new tab (target) is created, the first page it loads is about:blank. You get lifecycle events for this page as well. The second time the load event is fired is the one you're looking for (if you're using Page.lifecycleEvent).
Now, to handle the second matter - there are also other events you can use. The basic one for page loading is Page.loadEventFired, which, as far as I recall, will only be fired for the actual page (but I could be wrong about this one).
Important note: If you're using lifecycle events, they are fired for each frame separately, meaning that the main frame might finish loading before the sub frames are loaded. Page.loadEventFired has a different behavior and waits for all frames to fire their load event.
Here is a good article on the page lifecycle api.
Another possible solution could be:
document.onreadystatechange = function () {
if (document.readyState === 'complete') {
run the screenshot code...
}
}
I am creating a function that calculates a page loading time for each page of my Ionic 3 App (I use lazy loading). However, I am currently stuck in issues:
When does the page start creating HTML?
When does the page finish creating HTML?
When does the page complete downloading all resources on the page (image, etc …)?
Can anyone give me advice?
One thing to look at is https://blog.ionicframework.com/navigating-lifecycle-events/ this contains the ionic life-cycle eg. ionViewDidLoad(): Fired only when a view is stored in memory. This event is NOT fired on entering a view that is already cached. It’s a nice place for init related tasks.
Ionic 3's pages are also angular components so I'd imagine the another thing to look at is the component hooks. These methods are fired when in the stages of the component life cycle.
https://angular.io/guide/lifecycle-hooks
https://www.intertech.com/Blog/angular-component-lifecycle/
eg. ngAfterViewInit(){ stopTimer() } //this method is fired once Angular initializes component and child component content
To achive what you want you could have a provider that both pages link to. When you change page start a timer and stop it using ngAfterViewInit() or other more appropriate hook.
I'm using this hook on my Home to get and store some data for my app.
In many articles and tutorials over the net is been sad the ionViewDidLoad hook will fire only ONCE after the view is cached.
But I tested switching pages with navCtrl.setRoot then go back to Home...
The ionViewDidLoad is called again. Did I understand it all wrong? Am I doing it wrongly? I should put a "test" before my commands on ionViewDidLoad?
Any help or explanation for this...
ionViewDidLoad does get called only per page creation. This view is cached when navigation occurs through push() i.e this page is still there in the stack. If navigation happens back to this page via pop(), the hook is not called again.
You are currently using setRoot() to test. This will clear the navigation stack i.e all views are in the current stack are destroyed. The current view is also destroyed when you call pop() on the current page.
Check View Creation and Lifecycle hook section in the docs
I am using Angular2 with ionic, and I have this sort of component:
class MyComponent implements OnInit, OnDestroy {
ngOnInit() {
console.log("init");
socket.on("something", this.something.bind(this));
}
ngOnDestroy() {
console.log("destroy");
socket.remove("something", this.something.bind(this));
}
}
To open this page, I write this.nav.setRoot(MyComponent). Now my page is showing MyComponent, and the socket is listening for "something".
To refresh it, I write this.nav.setRoot(MyComponent) again. Now my page is showing MyComponet, and the socket is not listening for "something".
The console output is:
init
init
destroy
Why is it first run ngOnInit of the second component, and only then ngOnDestroy of the first one?
Is there a way to first call the destroy, and then the init?
Is there another way I should handle my socket?
As I understand this, you cannot really control, what should happen first in between ngOnInit of the second component and ngOnDestroy of the first one. These hooks, from 2 different components, at least, are not dependent on each other. Whether hooks on the same component are dependent on each other. Read this.
May be, this depends on whatever gets triggered faster at the moment.
In this case, what you can do is, you can move your code from ngOnDestroy before calling this.nav.setRoot(MyComponent).
Also, if the requirement does not suite this kind of code, you can try to refresh a particular type of UI component which needs to be refreshed than refreshing the entire component like this.nav.setRoot(MyComponent).
You can refresh a particular UI component using DOM using document.getElementByID('myDiv') type of operations.
Hope this helps. If not, please mention the specifics.
Apparentally, ionic has it's own lifecycle functions, as mentioned here.
Instead of ngOnInit use ionViewDidLoad
Instead of ngOnDestoy use ionViewWillLeave
Works like magic.
Hi we have a gwt app hosted on google app engine.
In one of the page bound to an entry point class (using root panel id) we call a rpc service to get some data.
The problem I am observing is that when even the home page is loaded that time the entry module class bound to another page gets instantiated and thus the service is called un-necessary.
any options to defer this behavior until the page is opened?
You can load the data for the page in the onLoad method instead of in the constructor so that the data isn't loaded till after the widget is attached to the DOM.
Moving the code under the clause like shown below fixed the issue
if(RootPanel.get("login") !=null){
//moved here
}