How to reload page every time click on tabs?

Ionic Framework ionic-v3
1

My problem is when i click on first tab then page reload but when i click second time on same tab means first tab that time page not reload

so i want to give me solution that every time page should reload

please help me

2 Likes
2

Use the ionViewWillEnter lifecycle event on your page.
You can put the correct code in that method to refresh all the necessary things on your page.

–> https://ionicframework.com/docs/api/navigation/NavController/

11 Likes
3

Thank you so much @MattE

It works for me

4

Hi @MattE my view page code is as

<ion-tab [root]=“tab1Root” tabTitle=“My Rx” tabIcon=“ios-medical-outline”>
<ion-tab [root]=“tab2Root” tabTitle=“Search” tabIcon=“search”>
<ion-tab [root]=“tab3Root” tabTitle=“Settings” tabIcon=“ios-settings-outline”>

ion-tabs selectedIndex=“1”

my ts page is ::

import { Component } from ‘@angular/core’;
import { HomePage } from ‘…/home/home’;
import { MyRxPage } from ‘…/my-rx/my-rx’;
import { SettingsPage } from ‘…/settings/settings’;
import { NavController, LoadingController, Select, RadioButton } from ‘ionic-angular’;

@Component({
templateUrl: ‘tabs.html’
})
export class TabsPage {
tab1Root = MyRxPage;
tab2Root = HomePage;
tab3Root = SettingsPage;
constructor(public navCtrl: NavController) {
}
}

Sir, I want in a way that, when I’ll click on any tab, concern page should reload accordingly.
Please help me

5

Hello, @dilipkumar1007

Just write your main code( that reflect when page loads )inside ionViewWillEnter() in MyRxPage,HomePage,SettingsPage

6

If there is a sub page of the root page and you navigate back to root page from it, then ionViewWillEnter() is not triggering for me.
Ex: HomePage has button on click it goes to user page. Now if I hit back from user page it will redirect to HomePage but ionViewWillEnter is not getting triggered. This happens only with tabs, for normal pages it is getting triggered.

7

@cooldp007

Thnx for your kind support, It works for me

8

Hello, @vasanthb

Please post your home page code

9 
export class HomePage {
ionViewWillEnter(){
//calling an API
}
}
2 Likes
10

Hello, @vasanthb
it should work

11

ionViewWillEnter is not triggering for me either.
Someone have a solution ?
Thks.

12

Show your code lets see what you are doing

13

In Ionic 4 with Angular router nothing above worked for me. I did find a way through watching the router and catching my tab URL when triggered.

  routerWatch() {
    this.routerSubscription = this.router.events.subscribe(
      (event: NavigationEnd) => {
        if(event instanceof NavigationEnd) {
          if(event.url == '/tabs/(jobs:jobs)')
            this.jobs = null;
            this.getJobs();
        }
      }
    );
  }

ionPageWillLeave() {
    this.routerSubscription.unsubscribe();
}

make sure to Unsubscribe on ionPageWillLeave or ionPageDidLeave or you will end up with a massive memory leak.

14

Thank you for this! Used your method and it is working for me.

Surely ionViewWillEnter() should fire when coming back to a tab…? I hope the Ionic team addresses this at some point.

15

You can make a case for this position, but I think it’s miles from “surely”. In any event, as a defensive programmer I think the most prudent approach is to assume nothing about willEnter/willLeave events aside from the fact that they come in pairs: you will never get two of the same kind in a row.

17

It does not in Ionic 4, not a single page event fires when navigating from one tab to another.

18

I said all you can rely on is:

you will never get two of the same kind in a row.

If you don’t get any, isn’t that still true?

19

Even with my router watch I end up with memory leaks. This page caching is garbage, Im removing Tabs altogether and adding tabs manually to every page.

20

If doesn´t work ionViewWillEnter()
Force refreshing with: this.navCtrl.setRoot(this.navCtrl.getActive().component);

21

Hi in Ionic 5 I solved this problem,
in
tabs.html file::

<ion-tabs #tabs (ionTabsWillChange)=“gets(tabs)”>

{{'home' | translate}}

in tabs.ts file :::
gets(tab: IonTabs) {
if ("/tabs/" + tab.getSelected() != this.router.url) {
this.router.navigateByUrl(“tabs/” + tab.getSelected());
}
}

this code worked for me. when tab selected if in children route , reload page.