I’ve this on every one of my pages. The navbar is displaying, but the buttons aren’t switching to other tabs.
This is one of the pages (every one is the same, just with a different ion-title
):
<ion-header>
<ion-toolbar>
<ion-title>Saved</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="saved">
<ion-icon name="heart"></ion-icon>
<ion-label>Saved</ion-label>
</ion-tab-button>
<ion-tab-button tab="search">
<ion-icon name="search"></ion-icon>
<ion-label>Search</ion-label>
</ion-tab-button>
<ion-tab-button tab="playlists">
<ion-icon name="list"></ion-icon>
<ion-label>Playlists</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
And this is my app-routing.modules.ts
file:
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'saved', pathMatch: 'full' },
{ path: 'saved', loadChildren: './pages/saved/saved.module#SavedPageModule' },
{ path: 'search', loadChildren: './pages/search/search.module#SearchPageModule' },
{ path: 'playlists', loadChildren: './pages/playlists/playlists.module#PlaylistsPageModule' }
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
If anyone knows a solution… I’d love to know!! I’ve absolutely no idea why this doesn’t work, this is mostly straight from the docs.
jjdev
May 20, 2019, 3:19am
2
Try adding the href
attribute to the ion-tab-button. Your tab buttons are connected to the tabs via the tab
attribute, but require an href to actually change the view
Tried both these, none worked. The second one is how it’s used on the docs, but the docs also say that href
isn’t needed for Angular, which is what I’m using (afaik).
Edit: tried this one without /
's too.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="saved" href="/">
<ion-icon name="heart"></ion-icon>
<ion-label>Saved</ion-label>
</ion-tab-button>
<ion-tab-button tab="search" href="/search">
<ion-icon name="search"></ion-icon>
<ion-label>Search</ion-label>
</ion-tab-button>
<ion-tab-button tab="playlists" href="/playlists">
<ion-icon name="list"></ion-icon>
<ion-label>Playlists</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="saved" href=/app/pages/(saved:saved)">
<ion-icon name="heart"></ion-icon>
<ion-label>Saved</ion-label>
</ion-tab-button>
<ion-tab-button tab="search" href="/app/pages/(search:search)">
<ion-icon name="search"></ion-icon>
<ion-label>Search</ion-label>
</ion-tab-button>
<ion-tab-button tab="playlists" href="/app/pages/(playlists:playlists)">
<ion-icon name="list"></ion-icon>
<ion-label>Playlists</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
jjdev
May 22, 2019, 3:19pm
4
The second way is pre version 4.0.0-beta15
Ionic 4 no longer requires the named outlets
Did you generate this tabbed app using the ionic CLI? It creates a tab page nested in the the root app page that then points to the 3 tab pages
app
|_tabs
|_tab1
|_tab2
|_tab3
And the app-routing should only point to the tabs page, and then the tab routing points to the actual tabs
I did, but then deleted the tabs folder. I’m probably just going to go back to using that, as I literally haven’t done anything in my app cause I couldn’t get this to work. Unless you have a solution, of course.
jjdev
May 22, 2019, 4:10pm
6
I think the standard practice is having a tabs page to hold the tab bar and control the tab routing
1 Like