I have a tab layout with 5 tabs. When i navigate to the second tab and then to a subpage, navigating back with ion-back-button
lands on the first tab. How can i go back to the last selected tab?
Any help much appreciated!
const routes: Routes = [
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
{ path: 'timetable', loadChildren: './timetable/timetable.module#TimetablePageModule' },
{ path: 'artistDetail/:id', loadChildren: './artist-detail/artist-detail.module#ArtistDetailPageModule' },
{ path: 'artist', loadChildren: './artist/artist.module#ArtistPageModule' },
];
Tab routes:
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full',
},
{
path: 'home',
outlet: 'home',
component: HomePage
},
{
path: 'timetable',
outlet: 'timetable',
component: TimetablePage
},
{
path: 'artist',
outlet: 'artist',
component: ArtistPage
}
]
},
{
path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full'
}
];
Tabs
<ion-tab label="Dashboard" icon="home" href="/tabs/(home:home)">
<ion-router-outlet name="home"></ion-router-outlet>
</ion-tab>
<ion-tab label="Zeitplan" icon="time" href="/tabs/(timetable:timetable)">
<ion-router-outlet name="timetable"></ion-router-outlet>
</ion-tab>
[...]
Tab Page which navigates to subpage of tab with routerLink
<div class="venue-box animated fadeIn fast delay-500ms" *ngFor="let artist of data" routerLink="/artistDetail/{{artist.id}}" [ngStyle]="{'background-image': 'url(' + artist?.imagePath + ')'}">
<div class="box">
<h1>{{artist?.name}}</h1>
<p>{{artist?.subtitle}}</p>
</div>
</div>
Header on Subpage:
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>{{artist}}</ion-title>
</ion-toolbar>
</ion-header>
Navigation in Ionic works like a simple stack, where we push new pages onto the top of the stack, which takes us forwards in the app and shows a back button. To go backwards, we pop the top page off. Since we set this. navCtrl in the constructor, we can call this.
In Ionic 4, ion-back-button with tab view contain bugs that needs to be fixed. https://github.com/ionic-team/ionic/issues/15216
remove page routing from app-routing.module and then add the route of that page inside tabs.router.module something like this:
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'home',
children: [
{
path: '',
loadChildren: '../../pages/home/home.module#HomePageModule'
}
]
},
{
path: 'jobsRequest',
children: [
{
path: '',
loadChildren: '../../pages/Jobs/jobs-request/jobs-
request.module#JobsRequestPageModule'
},
{
path: 'jobs-details',
loadChildren: '../../pages/Jobs/jobs-details/jobs-details.module#JobsDetailsPageModule'
}
]
},
{
path: '',
redirectTo: '/app/tabs/home',
pathMatch: 'full'
}
];
you can call jobs-details page like this :
this.router.navigate(['/app/tabs/jobsRequest/jobs-details', { IsFavorite: this.IsFavorite }]);
and from jobs-details page use:
<ion-header>
<ion-toolbar>
<ion-title>jobs details</ion-title>
<ion-buttons slot="end">
<ion-back-button ></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With