docs(): add section on events and guards (#16481)

* docs(): add section on events and guards

* docs(): copy edit

* docs(): copy edits
This commit is contained in:
Mike Hartington
2018-11-27 20:26:49 -05:00
committed by GitHub
parent 3894b7a510
commit e6f9d37301

View File

@ -1,11 +1,30 @@
# ion-router-outlet # ion-router-outlet
RouterOutlet is a component used in routing within an Angular app. RouterOutlet behaves the same way as Angular's built-in RouterOutlet component, but contains the logic needed for animating views in and out. Router Outlet is a component used in routing within an Angular app.
Router Outlet behaves in a similar way as Angular's built-in Router Outlet component, but contains the logic for providing a stacked navigation, and animating views in and out.
> Note: this is only meant for Angular projects. For vanilla JavaScript, use `ion-router` and `ion-route` instead. > Note: this is only meant for Angular projects. For vanilla JavaScript, use `ion-router` and `ion-route` instead.
While RouterOutlet has methods for navigating around, it's recommended to use the navigation methods in Angular's router. While Router Outlet has methods for navigating around, it's recommended to use the navigation methods in Angular's router.
### Life Cycle Hooks
Routes rendered in a Router Outlet have access to specific Ionic events that are wired up to animations
| Event Name | Trigger |
|--------------------|------------------------------------------------------------------|
| `ionViewWillEnter` | Fired when the component being routed to is about to animate in. |
| `ionViewDidEnter` | Fired when the component being routed to has animated in. |
| `ionViewWillLeave` | Fired when the component being routed from is about to animate. |
| `ionViewDidLeave` | Fired when the component being routed from has animated. |
These event tie into Ionic's animation system and can be used to coordinate parts of your app when a Components is done with it's animation. These events are not a replacement for Angular'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](https://angular.io/guide/router#milestone-5-route-guards).
<!-- Auto Generated Below --> <!-- Auto Generated Below -->