Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/servrox/ion-back-button-tabs
Advanced ion-back-button component.
https://github.com/servrox/ion-back-button-tabs
angular ion-back-button ion-back-button-tabs ion-tabs ionic ionic-4 ionic-framework ionic4 ionic4-angular7 ionic4-tabs ionicframework ionrouteroutlet lazy-loading navigation router stackcontroller
Last synced: 2 months ago
JSON representation
Advanced ion-back-button component.
- Host: GitHub
- URL: https://github.com/servrox/ion-back-button-tabs
- Owner: servrox
- License: mit
- Created: 2019-03-02T03:18:20.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-06T13:49:30.000Z (almost 6 years ago)
- Last Synced: 2024-10-06T05:30:56.999Z (3 months ago)
- Topics: angular, ion-back-button, ion-back-button-tabs, ion-tabs, ionic, ionic-4, ionic-framework, ionic4, ionic4-angular7, ionic4-tabs, ionicframework, ionrouteroutlet, lazy-loading, navigation, router, stackcontroller
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ion-back-button-tabs
- Size: 11.7 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Advanced `ion-back-button` component
Use the `ion-back-button-tabs` component instead of [`ion-back-button`](https://ionicframework.com/docs/api/back-button)
when you got trouble navigating from a *tabbed-page* to a *global-page* and back.
For a complete [*demo project*](https://github.com/servrox/demo-ionic-tabs-back-button#getting-started), an [*alternative workaround*](https://github.com/servrox/demo-ionic-tabs-back-button#1-passing-previous-page-s-global-page-one) and a [*problem description*](https://github.com/servrox/demo-ionic-tabs-back-button#problem-explained) look [here](https://github.com/servrox/demo-ionic-tabs-back-button).
## 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
```
Global Page
```
## How it works
`ion-back-button-tabs` uses the [`ion-back-button`](https://ionicframework.com/docs/api/back-button) internally.
There are two attributes added (*tabsPrefix* + *tabsPageSelector*)
which are used in the also added directive (*ionBackButtonTabs*).
```
```
The *ionBackButtonTabs* directive looks pretty much the same as the [`ion-back-button` directive](https://github.com/ionic-team/ionic/blob/4646f53ec7ab39a2e89f0c59a427b6b61ea7788e/angular/src/directives/navigation/ion-back-button.ts),
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*](#tabsprefix-is-the-url-path-set-for-the-tabsPage-component-eg-tabs) 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*](#tabspageselector-is-the-selector-of-the-tabspage-component-eg-app-tabs).
For the determination, the [*StackController*](https://github.com/ionic-team/ionic/blob/v4.0.2/angular/src/directives/navigation/stack-controller.ts) of the [`ion-tabs`](https://ionicframework.com/docs/api/tabs) component view, which is located in the component view of the specified [*tabsPageSelector*](#tabspageselector-is-the-selector-of-the-tabspage-component-eg-app-tabs), is taken.
Nevertheless, this is not a complete clean solution because currently private attributes of the current *IonRouterOutlet* are used. The [*location*](https://github.com/ionic-team/ionic/blob/v4.0.2/angular/src/directives/navigation/ion-router-outlet.ts#L48) 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](LICENSE.md) file for details
## Authors
* **Marcel Mayer** -
[servrox.solutions](http://servrox.solutions)