メインコンテンツまでスキップ
Version: v6

ion-router-outlet

shadow

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 NameDescription
ionViewWillEnterコンポーネントが表示されるアニメーションがはじまる時に発火します。
ionViewDidEnterコンポーネントが表示されるアニメーションが終了した時に発火します。
ionViewWillLeaveコンポーネントを離脱するアニメーションがはじまる時に発火します。
ionViewDidLeaveコンポーネントを離脱するアニメーションが終了した時に発火します。

これらのイベントはIonicのアニメーションシステムと連携し、コンポーネントがアニメーションを完成させたときにアプリの挙動を調整するのに使用できる。これらのイベントはフレームワーク独自のイベントシステムに代わるものではなく、追加されたものです。

Router Guardsを扱うために、以前のionViewCanEnterionViewCanLeaveは、フレームワーク特有の同等のものに置き換えられました。AngularにはRouter Guardsがあります。

Properties

animated

DescriptionIf true, the router-outlet should animate the transition of components.
Attributeanimated
Typeboolean
Defaulttrue

animation

DescriptionBy 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.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
DefaultgetIonMode(this)