@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.
Does anyone have another solution for this issue? When I try to use BLaCkSMiTH77 solution, my content scrolls also when I scroll down to a button and push from there a new View on the Viewstack which should not happen! The other solutions does not work for me but I dont know how to use ionSelected() as markharding replied.
I noticed that when I click an already selected tab, it gets destroyed and recreated again. What’s even worse, the “rootParams” specified in the Tabs are not passed to the page when recreating. Do you think this is a bug?
When I add the ionSelected() method, the tab page won’t be recreated so that solved my problem. Is this method documented somewhere? I couldn’t find it anywhere else than here.
It seems it is best to add an empty ionSelected to every tab page to prevent recreating the page and to avoid unexpected bugs. It’s a bit strange it isn’t documented properly anywhere.
Hi all, I have an answer to satisfy all of you I think.
The easiest way to do what is wanted by the OP (and also all the other event has mentionned by the comments) can be done using event binding.
In your tabs.ts file (or the file used to generate the tabs that will hold your pages), you can use an ngAfterViewInit() function that triggers once the page has loaded, and then bind all the buttons to the tabs HTML element and then do the appropriate action. You can bind them to those tags since they all have unique IDs associated with them.
Here’s how I did it:
// Once the view is done loading (this is triggered automatically)
ngAfterViewInit(){
// Get the element by the id 'tab-0-0' attributed by the Ionic team for the first button
document.getElementById('tab-t0-0').addEventListener('click', event => {
// Execute your code here when the first button is clicked
});
// Get the element by the id 'tab-0-1' attributed by the Ionic team for the second button
document.getElementById('tab-t0-1').addEventListener('click', event => {
// Execute your code here when the second button is clicked
});
// Get the element by the id 'tab-0-2' attributed by the Ionic team for the third button
document.getElementById('tab-t0-2').addEventListener('click', event => {
// Execute your code here when the third button is clicked
});
// You can add as many as you want from here, just remember to increment the ID
}
If you want, you can change the click event to be any other event (maybe hold or something similar has mentionned by some people).
If you close and reopen the Tabs page, a new ID will be generated for the new Tabs page if not destroyed properly.
The name will go from “tab-t0-1” to “tab-t1-1”. So you need to ensure that you generate the subscription for several different IDs every time you trigger the ngAfterViewInit().
I iterated through the different IDs until an ID was not undefined and then I triggered the subscription with the existing IDs.
the OP asks about Ionic2, in Ionic3
IonSelect() only fires the first time, but not when the tab is already active.
I needed something to set focus to the child components of the pages associated with each tab. I am using the following
Either (click) or (tap) works but set it at the <ion-tabs level not <ion-tab
You will need to save/cache your Tab.index as shown above, with (ionChange)=“TabChanged($event)”