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

ion-router-outlet

shadow

コンテンツ

router outletはAngularの組み込みrouter outletコンポーネントやVueのルーター・ビューコンポーネントと同様の振る舞いをしますが、スタック式のナビゲーションを提供し、ビューをアニメーションで出し入れするためのロジックを含んでいます。

router outlet はナビゲーション用のメソッドを備えていますが、フレームワークのルーターにあるナビゲーションメソッドを使用することをお勧めします。

ライフサイクルHook

Router OutletでRoutesがレンダリングされた時、アニメーションに関連付けられた特定のIonicイベントにアクセスできます。

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

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

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

プロパティ

animated

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

animation

DescriptionThis property allows to create custom transition using AnimationBuilder 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)

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.