ion-router-outlet

Contents

Router outlet is a component used in routing within an Angular app. It behaves in a similar way to Angular's built-in router outlet component, but contains the logic for providing a stacked navigation, and animating views in and out.

Note: this component should only be used with Angular 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 Angular's router.

ライフサイクルHook

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

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

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

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

プロパティ

animated

Description

If true, the router-outlet should animate the transition of components.

Attributeanimated
Typeboolean
Defaulttrue

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.

Type((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"
DefaultgetIonMode(this)