Tabs switching and ngOnChanges in component problem

Ionic Framework ionic-v3
1

I have an application with 2 tabs: Map and Filters. On Map I have a page with map component. Map component does call to server periodically. I want to pause these calls when tab is not active. On map page I listen for lifecycle hooks:

onPageDidEnter() {this.pageEntered = true;} onPageWillLeave() {this.pageEntered = false;}

Next, I pass through pageEntered as input to map component:

<map [updatesActived]="pageEntered"></map>

Next, in the map component, I listen in ngOnChanges lifecycle for changes:

ngOnChanges(changes) {console.log('change!', changes);}

The problem is that ngOnChanges hook stops working after switching tabs for second time. In other words:

  1. Switch from Map tab to Filter tab -> ngOnChanges is fired
  2. Switch from Filter tab to Map tab -> ngOnChanges is fired
  3. Switch from Map tab to Filter tab -> ngOnChanges is NOT fired
  4. Switch from Filter tab to Map tab -> ngOnChanges IS FIRED 2 times!

It doesn’t make sense to me. I tried to find any information about caching or anything that can cause such behaviour, but I wasn’t able to find answer. Can somebody explain me why this is happening ?

2

Did you ever get to the bottom of this issue? I am hitting the same thing and am wondering what I am missing in the ng lifecycle.

I can see that the first time I navigate to a tab the current tab continues to fire ngDoCheck after ionViewWillLeave is called and continue until the new tab is active. The 2nd time I navigate the ngDoCheck stop prior to the call to ionViewWillLeave on the current tab.