ion-router-outlet
Contents
Router outlet is a component used in routing within an Angular, React, or Vue app. It 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.
note
Note: this component should only be used with Angular, React, and Vue projects. For vanilla or Stencil JavaScript projects, use ion-router and ion-route.
Although router outlet has methods for navigating around, it's recommended to use the navigation methods in your framework's router.
ライフサイクルHook
Router OutletでRoutesがレンダリングされた時、アニメーションに関連付けられた特定のIonicイベントにアクセスできます。
| Event Name | Description |
|---|---|
ionViewWillEnter | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
ionViewDidEnter | コンポーネントが表示されるアニメーションが終了した時に発火します。 |
ionViewWillLeave | コンポーネントを離脱するアニメーションがはじまる時に発火します。 |
ionViewDidLeave | コンポーネントを離脱するアニメーションが終了した時に発火します。 |
これらのイベントはIonicのアニメーションシステムと連携し、コンポーネントがアニメーションを完成させたときにアプリの挙動を調整するのに使用できる。これらのイベントはフレームワーク独自のイベントシステムに代わるものではなく、追加されたものです。
Router Guardsを扱うために、以前のionViewCanEnter と ionViewCanLeaveは、フレームワーク特有の同等のものに置き換えられました。AngularにはRouter Guardsがあります。
Properties
animated
| Description | If true, the router-outlet should animate the transition of components. |
| Attribute | animated |
| Type | boolean |
| Default | true |
animation
| Description | By default ion-nav animates transition between pages based in the mode (ios or material design).However, this property allows to create custom transition using AnimateBuilder 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) |