Call data every time that user enters in a page (tab based routing)

Ionic Framework
1

Hi. I’m developing an app based on tab navigation.
ionic + stencil + typescript
I would like to make my api calls everytime that the user enters on a page but the page don’t recharge when user change tab page because of caching. there is an event that I can listen to do this operation? I need to have fresh data from api every time the user enters in tab pages.

Solution:
In the pare where I want to call the api each time the user enters the page, this code

@Listen('ionViewWillEnter')
listenIon() {
    this.userData = undefined;
    loadUserData(this.userId);
}
2

The ion-router-outlet has life cycle hooks - ion-router-outlet | Ionic Documentation.

An ion-route has navigation hooks - ion-route: API Route Component for Ionic Framework Apps.

1 Like
3

Is there a way for “vanilla” ionic projects (no react, vue, angular)?

This page tells that there should be hooks, but I couldn’t find any more info on how to use them. Also, looking at the ionic source it seems that these are actually not implemented for the vanilla case!?

Setting event listeners (e.g. ionViewDidEnter) on the outlet or the target component itself did not work.

  • ionRouteDidChange, is not quite sufficient as it provides the navigated paths.
  • ionTabsDidChange doesn’t trigger on navigations inside of tabs.
  • …

What I want is some kind of event/hook, where I get the target component which becomes active passed to my callback.

I wonder if the docs need to be more precise here or if these should actually get implemented (if missing).