Skip to main content
Version: v7

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

Descriptiontrueの場合、ルータ・アウトレットはコンポーネントの遷移をアニメーションで表現する必要があります。
Attributeanimated
Typeboolean
Defaulttrue

animation

Descriptionこのプロパティは、AnimationBuilder の機能を使用して、カスタムトランジションを作成することができます。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
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.