TLDR: How do you implement two pages each with with one
<ion-tabs> (each containing at least two
<ion-tab>s)? The tab names and icons change, the tabs content changes only after clicking on it.
I have a problem for which I struggled to find a solution for. I saw other people post about this too, also to no success. I hope that here someone knows the solution
First of all for context I uploaded a github repository: https://github.com/janhesters/twotabs.
I want to write an app in Ionic 3 in which I have two pages with
<ion-tabs> each containing 4
<ion-tab>s. I wrote two pages called home and hometwo (referred to as basepages). In each html I declared the ion-tabs.
Then I made 4 pages (about, abouttwo, contacts, contactstwo; referred to as tabpages), two of each are in the
<ion-tab>s of the each homepage.
Next I made a button on the first homepage that pushes the second home page on to the navCtrl. (I didn’t put the button on one of the tab pages, because then the page would’ve gotten pushed onto that nav, since each tab page seems to have it’s own nav https://ionicframework.com/docs/api/components/tabs/Tab/).
The second basepage gets pushed onto the stack and displays the new tabs along with their respective names icons and content.
The second basepage gets pushed onto the stack and displays the new tabs along with their respective names and icons. BUT the content of the pages is the one of the respective tabs of the first basepage. Only after clicking each new tab will the content change.
Does anyone know how to fix this?
(One of my less than good solution ideas, which I couldn’t figure out how to do, involved “ghost-clicking” all the tabs once as soon as the page loads… So yeah )
Any help would be much appreciated! Thank you!