Advanced ion-back-button component.
npm install ion-back-button-tabsion-back-button component ion-back-button-tabs component instead of ion-back-button
npm i ion-back-button-tabs --save
`
$3
`
import { BackButtonTabsModule } from 'ion-back-button-tabs';
@NgModule({
imports: [BackButtonTabsModule]
})
`
$3
#### tabsPrefix is the url path set for the TabsPage component (e.g. 'tabs')*
`
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path: 'tab2',
...
`
#### tabsPageSelector is the selector of the TabsPage component (e.g. 'app-tabs')*
`
import { Component } from '@angular/core';
@Component({
selector: 'app-tabs',
templateUrl: 'tabs.page.html',
styleUrls: ['tabs.page.scss']
})
export class TabsPage {}
`
$3
`
defaultHref="/tabs/tab1"
tabsPrefix="tabs"
tabsPageSelector="app-tabs">
Global Page
`
How it works
ion-back-button-tabs uses the ion-back-button internally.
There are two attributes added (tabsPrefix + tabsPageSelector)
which are used in the also added directive (ionBackButtonTabs).
`
[defaultHref]="defaultHref"
[tabsPrefix]="tabsPrefix"
[tabsPageSelector]="tabsPageSelector"
ionBackButtonTabs>
`
The ionBackButtonTabs directive looks pretty much the same as the ion-back-button directive,
except that it takes the correct route when navigating from a global-page to a tabbed-page.
This means that it's first checked with the help of the tabsPrefix if to navigate back to a tabbed-page.
If this is the case, the last active tab-route is determined with the help of the tabsPageSelector.
For the determination, the StackController of the ion-tabs` component view, which is located in the component view of the specified tabsPageSelector, is taken.