/ion-back-button-tabs

Advanced ion-back-button component.

Primary LanguageTypeScriptMIT LicenseMIT

Advanced ion-back-button component

Use the ion-back-button-tabs component instead of ion-back-button
when you got trouble navigating from a tabbed-page to a global-page and back.

Live Demo

For a complete demo project, an alternative workaround and a problem description look here.

Getting Started

1. Install

npm i ion-back-button-tabs --save

2. Import BackButtonTabsModule to your page module (shortened here)

import { BackButtonTabsModule } from 'ion-back-button-tabs';

@NgModule({
  imports: [BackButtonTabsModule]
})

3. Get attributes for ion-back-button-tabs

  • 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 {}

4. Use ion-back-button-tabs in template

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">

      <ion-back-button-tabs 
        defaultHref="/tabs/tab1" 
        tabsPrefix="tabs" 
        tabsPageSelector="app-tabs">
      </ion-back-button-tabs>
      
    </ion-buttons>
    <ion-title>Global Page</ion-title>
  </ion-toolbar>
</ion-header>

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).

<ion-back-button
    [defaultHref]="defaultHref"
    [tabsPrefix]="tabsPrefix"
    [tabsPageSelector]="tabsPageSelector"
    ionBackButtonTabs>
</ion-back-button>

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.

Nevertheless, this is not a complete clean solution because currently private attributes of the current IonRouterOutlet are used. The location attribute to get the current ViewContainerRef, which is needed to find the component views. And some more to support swipe gestures.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Authors