Router Outlet
The Router Outlet component manages the insertion and removal of various page components based on the current routing state of the application. It also controls animations and transitions when switching between pages (or views), enhancing the user experience with smooth visual changes. Essentially, it functions as a dynamic content container that automatically updates the displayed content according to user interactions.
Life Cycle Hooks
Routes rendered in a Router Outlet have access to specific WebJET events that are wired up to animations
| Event Name | Trigger |
|---|---|
ionViewWillEnter | Fired when the component routing to is about to animate into view. |
ionViewDidEnter | Fired when the component routing to has finished animating. |
ionViewWillLeave | Fired when the component routing from is about to animate. |
ionViewDidLeave | Fired when the component routing to has finished animating. |
These events tie into Ionic's animation system and can be used to coordinate parts of your app when a Components is done with its animation. These events are not a replacement for your framework's own event system, but an addition.
For handling Router Guards, the older ionViewCanEnter and ionViewCanLeave have been replaced with their framework specific equivalent. For Angular, there are Router Guards.
When to use
Use wje-router-outlet when the user needs to navigate the application or transition between states/screens.
When not to use
Do not use multiple parallel navigation patterns that compete with each other.
Accessibility
Provide clear active/selected states, predictable tab order, and naming of controls.
Recommended practices
- Keep the URL and UI state in sync to make the navigation reproducible.
- Use consistent terminology for items across menus, breadcrumb and tabs.
- For deep structures, add auxiliary context (breadcrumb, title, icons).
Attributes and properties
Pre tento komponent nie sú dostupné žiadne vlastnosti.
Events
Pre tento komponent nie sú dostupné žiadne udalosti.
Methods
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS shadow parts
Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.
CSS custom variables
Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.
Slots
Pre tento komponent nie sú dostupné žiadne sloty.