How to rest/refresh/destroy pages on tab

Ionic Framework ionic-v3
1

Hello,

I’m using side menu and super tabs which include 3 pages, when click details button on home page it will go to the super tabs, now each page on super tabs has own API, there is set timer will fetch data every 30 second, Problem is when go back root home, the pages on the tab still connect to the API which mean function still working, i want to clear or destroy pages for each pageson the tab when press home page or when press another page on the tab?!

My code on super tabs:

tabs.ts:

ionViewDidLeave() {
console.log(‘ionViewDidLeave TabsPage’);
this.navCtrl.popToRoot();
}

onTabSelect(ev: any) {
console.log(‘Tab selected’, 'Index: ’ + ev.index, 'Unique ID: ’ + ev.id);
}

on tabs.html

<super-tabs electedTabIndex=“2” toolbarColor=“light” toolbarBackground=“dark” indicatorColor=“light” badgeColor=“light” [config]=“{ sideMenu: ‘left’ }” (tabSelect)=“onTabSelect($event)”>
<super-tab [root]=“exchangePage” title=“1” icon=“home” [rootParams]=“navParams.data”>
<super-tab [root]=“exchangePage” icon=“ios-analytics” title=“2” [rootParams]=“navParams.data”>
<super-tab [root]=“testPage” icon=“md-analytics” title=“3” [rootParams]=“navParams.data”>

Thank you.

2

I tried to use ionViewDidLeave, but still function is working even on the home page

PageTab1.ts

ionViewDidLeave() {
console.log(‘ionViewWillLeave TabsPage’);
clearInterval(this.interval);
}

3

Your unsubscriptions, clearInterval and others have to be managed at root’s root level.

It could be a scenario :

  • Write inside 2 separated functions the 2 different states (active interval or not) and set ID interval as attribute of app-root component (or homepage)
  • Subscribe to a service/provider who listen your state “stop all intervals - OR - start all intevals”, it can be triggered at any level inside your app by calling yourState.next(newValueState) of this service/provider.

State can be 1 or 0 ie. start Interval or stop interval

// the app.component.ts

activateIntervals(){
  activateInterval1()
  activateInterval2()
  activateInterval3()
}
deactivateIntervals(){
  clearInterval(this.id1)
  clearInterval(this.id2)
  clearInterval(this.id3)
}
initOrRealoadIntervals(){
  if(this.mySubscription) this.mySubscription.unsubscribe()
  this.mySubscription = this.myStateService.subscribe(e=>{
    if(e == 1){
      this.activateIntervals()
    }else if(e == 0){
      this.deactivateIntervals()
    }
  })
}

The service provider file


 private _state = new BehaviorSubject<number>(1);
 public state = this._state.asObservable();

 stopMyApiPullRequestInterval(){
    this.state.next(0)
 }

 startMyApiPullRequestInterval(){
    this.state.next(1)
 }

Any page, servicer or component file in the app

import { MyServiceProvider } from '../where-the-file-is/where-the-file-is'

constructor(private myServiceProvider: MyServiceProvider){}

// Local method can be called by click on button inside tamplate
activateApiPullRequest(){
  this.myServiceProvider.startMyApiPullRequestInterval()
}

deactivateApiPullRequest(){
  this.myServiceProvider.stopMyApiPullRequestInterval()
}

With this pattern, the subscription of pull request api is stateless in regard of lifecycle (destruction/ionViewWillUnload/didUnload/ngOnDestroy) of your tabs component :slight_smile:

4

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…

5

All right, this code works for me too, but when i have click to someone non active tab, shows the active page before reload main page. How can this issue be solved?