メインコンテンツへスキップ
バージョン: v8

ion-nav

shadow

Navは、任意のコンポーネントをロードし、新しいコンポーネントをスタックにプッシュするためのスタンドアロンコンポーネントです。

Router Outletとは異なり、Navは特定のルーターに縛られていません。つまり、Navコンポーネントをロードし、他のコンポーネントをスタックにプッシュした場合、それらはアプリの全体的なルーターには影響しません。たとえば、新しいコンポーネントをion-navにプッシュして、URLが更新されることを期待しないでください。これは、アプリのURLに縛られることなく、独自のサブナビゲーションが必要なモーダルがある場合に適しています。

注

ion-navはルーティングに使用することを意図していません。代わりに、Angular、React、およびVueのルーティングガイド、またはバニラJavaScriptプロジェクトの場合はion-routerを参照してください。

NavLinkは、Navと対話する際の簡素化されたAPIです。開発者は、コンポーネントをカスタマイズしたり、コンポーネントプロパティを渡したり、ルートアニメーションの方向を変更したり、ナビゲート時にカスタムアニメーションを定義したりできます。

モーダルはNavを使用して、URLに依存しない線形ナビゲーションを提供できます。

注

以下の例では、Navへの参照と、ビューをプッシュおよびポップするための公開メソッドAPIを使用しています。このレベルのきめ細かいアクセスと制御を必要としない実装では、NavLinkを使用することをお勧めします。

インターフェース​

必須ではありませんが、このインターフェースは、このコンポーネントから放出されるIonicイベントのより強力な型付けのために、CustomEventインターフェースの代わりに使用できます。

interface NavCustomEvent extends CustomEvent {
  target: HTMLIonNavElement;
}

プロパティ​

animated​

説明trueの場合、ナビゲーションはコンポーネントのトランジションをアニメーション化する必要があります。
属性animated
型boolean
デフォルトtrue

animation​

説明デフォルトでは、ion-navはモード（iosまたはマテリアルデザイン）に基づいてページ間のトランジションをアニメーション化します。ただし、このプロパティを使用すると、AnimationBuilder関数を使用してカスタムトランジションを作成できます。
属性未定義
型((baseEl: any, opts?: any) => Animation) ｜ undefined
デフォルト未定義

root​

説明ロードするルートNavComponent
属性root
型Function ｜ HTMLElement ｜ ViewController ｜ null ｜ string ｜ undefined
デフォルト未定義

rootParams​

説明ルートコンポーネントの任意のパラメーター
属性未定義
型undefined ｜ { [key: string]: any; }
デフォルト未定義

swipeGesture​

説明ナビゲーションコンポーネントでスワイプして戻ることができるようにする必要があるかどうか。
属性swipe-gesture
型boolean ｜ undefined
デフォルト未定義

イベント​

名前説明バブル
ionNavDidChangeナビゲーションがコンポーネントを変更したときに発生するイベントfalse
ionNavWillChangeナビゲーションがコンポーネントを変更しようとするときに発生するイベントfalse

メソッド​

canGoBack​

説明現在のビューが戻れる場合はtrueを返します。
シグネチャcanGoBack(view?: ViewController) => Promise<boolean>

getActive​

説明アクティブなビューを取得します。
シグネチャgetActive() => Promise<ViewController ｜ undefined>

getByIndex​

説明指定されたインデックスのビューを取得します。
シグネチャgetByIndex(index: number) => Promise<ViewController ｜ undefined>

getLength​

説明スタック内のビューの数を返します。
シグネチャgetLength() => Promise<number>

getPrevious​

説明前のビューを取得します。
シグネチャgetPrevious(view?: ViewController) => Promise<ViewController ｜ undefined>

insert​

説明指定されたインデックスのナビゲーションスタックにコンポーネントを挿入します。これは、ナビゲーションスタックの任意のポイントにコンポーネントを追加するのに役立ちます。
シグネチャinsert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>

insertPages​

説明指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入します。配列内の最後のコンポーネントがビューとしてインスタンス化され、アクティブなビューになるようにアニメーション化されます。
シグネチャinsertPages(insertIndex: number, insertComponents: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>

pop​

説明ナビゲーションスタックからコンポーネントをポップします。現在のコンポーネントから戻ってナビゲートします。
シグネチャpop(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>

popTo​

説明ナビゲーションスタック内の特定のインデックスまでポップします。
シグネチャpopTo(indexOrViewCtrl: number ｜ ViewController, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>

popToRoot​

説明どれだけ戻る必要があるかに関わらず、スタックのルートまで戻ります。
シグネチャpopToRoot(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>

push​

説明新しいコンポーネントを現在のナビゲーションスタックにプッシュします。追加情報をオブジェクトとして渡します。この追加情報はNavParamsを通してアクセスできます。
シグネチャpush<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>

removeIndex​

説明指定されたインデックスにあるナビゲーションスタックからコンポーネントを削除します。
シグネチャremoveIndex(startIndex: number, removeCount?: number, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>

setPages​

説明現在のナビゲーションスタックのビューを設定し、最後のビューに移動します。デフォルトではアニメーションは無効になっていますが、ナビゲーションコントローラーにオプションを渡すことで有効にできます。ナビゲーションパラメータは、配列内の個々のページにも渡すことができます。
シグネチャsetPages(views: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>

setRoot​

説明現在のナビゲーションスタックのルートをコンポーネントに設定します。
シグネチャsetRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>

CSS シャドウパーツ​

このコンポーネントでは利用可能なCSSシャドウパーツはありません。

CSSカスタムプロパティ​

このコンポーネントでは利用可能なCSSカスタムプロパティはありません。

スロット​

このコンポーネントでは利用可能なスロットはありません。

目次

このページを編集