ion-nav
Nav 是一個獨立元件，用於載入任意元件並將新元件推入堆疊。
與 Router Outlet 不同，Nav 不會與特定的路由器綁定。這表示如果我們載入 Nav 元件，並將其他元件推入堆疊，它們不會影響應用程式的整體路由器。例如，您不應將新元件推送到 ion-nav 並期望 URL 更新。這適用於您可能需要自己的子導覽，而無需將其綁定到應用程式 URL 的模式視窗。
注意
ion-nav 並非用於路由。相反地，請參閱 Angular、React 和 Vue 的路由指南，或適用於原生 JavaScript 專案的 ion-router。
使用 NavLink
NavLink 是與 Nav 互動時的簡化 API。開發人員可以自訂元件、傳遞元件屬性、修改路由動畫的方向或在導覽時定義自訂動畫。
模式視窗內的導覽
模式視窗可以使用 Nav 來提供獨立於 URL 的線性導覽。
注意
以下範例使用 Nav 的參考以及公用方法 API 來推入和彈出檢視。建議在不需要此等級的精細存取和控制的實作中使用 NavLink。
介面
NavCustomEvent
雖然不是必要的，但此介面可用於代替 CustomEvent 介面，以便在使用從此元件發出的 Ionic 事件時具有更強的類型檢查。
interface NavCustomEvent extends CustomEvent {
target: HTMLIonNavElement;
}
屬性
animated
| 描述 | 如果為 true，則導覽應動畫呈現元件的轉換。 |
| 屬性 | animated |
| 類型 | boolean |
| 預設值 | true |
animation
| 描述 | 依預設，ion-nav 會根據模式（ios 或 material design）動畫呈現頁面之間的轉換。但是，此屬性允許使用 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 Shadow Parts
此元件沒有可用的 CSS shadow parts。
CSS Custom Properties
此元件沒有可用的 CSS 自訂屬性。
插槽
此元件沒有可用的插槽。