Capturing ion-tab click on active tab event

Ionic Framework ionic-v3
25

I’m using this solution:

tabs.html

<ion-tabs #mainTabs (tap)="tapped()">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="paper"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

tabs.ts

@ViewChild('mainTabs') mainTabs: Tabs;

constructor(public nav:NavController, public events: Events ) {}

// This will be executed before ionChange event
public tapped() {
    this.events.publish('home:scrollToTop', Date.now() );
}

home.ts

[...]
@ViewChild(Content) content: Content;

constructor(public app: App, public nav: NavController, public events: Events, private logic:StpLogicService) {
    // NOTE: This will be executed only when home is already the active/current tab
    events.subscribe('home:scrollToTop', (time) => {
      console.log('home:scrollToTop', 'at', time);
      this.content.scrollToTop();
    });
}

The effect is: Homepage si scrolled to top only when already displayed.

8 Likes