https://github.com/servrox/demo-ionic-tab-routing
An Ionic project which shows different kinds of route definition for a tab based layout.
https://github.com/servrox/demo-ionic-tab-routing
ionic4 lazy-loading navigation routing
Last synced: 29 days ago
JSON representation
An Ionic project which shows different kinds of route definition for a tab based layout.
- Host: GitHub
- URL: https://github.com/servrox/demo-ionic-tab-routing
- Owner: servrox
- Created: 2019-02-17T16:15:59.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-25T00:33:11.000Z (about 6 years ago)
- Last Synced: 2025-03-27T22:51:08.588Z (about 2 months ago)
- Topics: ionic4, lazy-loading, navigation, routing
- Language: TypeScript
- Size: 116 KB
- Stars: 35
- Watchers: 4
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Demo: Ionic project with a tab based layout
which shows different kinds of route definitions
for lazy modules
## Explanation
The example includes **two kinds of route definition**,
which are shown in *Tab One* and *Tab Two*.
You can also see how to **dynamically adjust the routing** to use pages in different tabs.
The normal page flow for each tab is *Tab -> Profile -> Profile Settings*.
The module flow is following: *App -> Tabs -> Tab -> Profile -> ProfileSettings*.
Each page is a lazy loaded module.
For the navigation to the previous page I used the *ion-back-button*.
Each tab is stateful, which means that displayed pages are kept at a tab change.
Because the profile page can be called by tab one and tab two,
there is some logic to make back and forth navigation work correctly.
### Route definition for Tab One
For *Tab One* the whole page flow is defined in one file (s. *tabs.router.module.ts*).
It is also possible to move the whole routing in *app-routing.module.ts*.
### Route definition for Tab Two
For *Tab Two* there's only one one route definiton in *tabs.router.module.ts*:
*TabsModule -> Tab2PageModule*.
Every further route is defined in the then loaded module,
for this demo it means that the modules loaded behind *Tab Two* defining two routes.
First a *no-name-route* which loads the corresponding component.
(For the *ProfilePageModule* that means the *ProfilePage*.)
Second the page-module we can route to.
(For the *ProfilePageModule* that means the *ProfileSettingsPageModule*.)
## Important tip
With Ionic [4.0.0-beta.18](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#400-beta18-2018-12-13) there was breaking changes for angular tabs.
The usage of ion-tab was removed and it's not necessary to use named outlets.
A common mistake is that not all continuing routes (child-routes) are defined in the children-block.
If you don't define it in the child-block routing may seem to work,
but things like *ion-back-button* are fucked up.
## Router Tree
## Getting Started
```
git clone https://github.com/servrox/demo-ionic-tab-routing.git
cd demo-ionic-tab-routing
yarn
ionic serve
```
## Built With
* [Ionic CLI](https://ionicframework.com/docs/cli/) - version 4.10.3
* [Ionic Framework](https://material.angular.io/) - @ionic/angular 4.0.1
## Authors
* **Marcel Mayer** -
[servrox.solutions](http://servrox.solutions)