ion-router-outlet
路由出口的行为方式与 Angular 的内置路由出口组件和 Vue 的路由视图组件类似，但包含提供堆叠导航以及动画视图进出的逻辑。
🌐 The router outlet behaves in a similar way to Angular's built-in router outlet component and Vue's router view component, but contains the logic for providing a stacked navigation, and animating views in and out.
尽管路由出口具有导航方法，但建议使用框架路由中的导航方法。
🌐 Although router outlet has methods for navigating around, it's recommended to use the navigation methods in your framework's router.
生命周期钩子
🌐 Life Cycle Hooks
在 Router Outlet 中渲染的路由可以访问连接到动画的特定 Ionic 事件
🌐 Routes rendered in a Router Outlet have access to specific Ionic events that are wired up to animations
| 事件名称 | 触发条件 |
|---|---|
ionViewWillEnter | 当要路由到的组件即将动画进入视图时触发。 |
ionViewDidEnter | 当要路由到的组件动画完成后触发。 |
ionViewWillLeave | 当要从中路由的组件即将动画时触发。 |
ionViewDidLeave | 当要路由到的组件动画完成后触发。 |
这些事件与 Ionic 的动画系统相关联，可用于在组件完成其动画时协调应用的各个部分。这些事件并不是替代你的框架自身的事件系统，而是一种补充。
🌐 These event 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.
在处理路由守卫时，旧的 ionViewCanEnter 和 ionViewCanLeave 已被它们的框架特定等价物取代。对于 Angular，有 路由守卫。
🌐 For handling Router Guards, the older ionViewCanEnter and ionViewCanLeave have been replaced with their framework specific equivalent. For Angular, there are Router Guards.
属性
🌐 Properties
animated
| Description | If true, the router-outlet should animate the transition of components. |
| Attribute | animated |
| Type | boolean |
| Default | true |
animation
| Description | This property allows to create custom transition using AnimationBuilder functions. |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
mode
| Description | The mode determines which platform styles to use. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | getIonMode(this) |
事件
🌐 Events
No events available for this component.
方法
🌐 Methods
No public methods available for this component.
CSS 阴影部分
🌐 CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
🌐 CSS Custom Properties
No CSS custom properties available for this component.
插槽
🌐 Slots
No slots available for this component.