ion-nav
Nav 是一个独立的组件，用于加载任意组件并将新组件推入堆栈。
与 Router Outlet 不同，Nav 不绑定到特定的路由器。这意味着如果我们加载一个 Nav 组件，并将其他组件推入堆栈，它们不会影响应用的整体路由。例如，你不应该向 ion-nav 推入一个新组件并期望 URL 会更新。这适用于某些场景，比如需要一个模态框（modal）来拥有自己的子导航，而不必将其与应用 URL 绑定。
备注
ion-nav 不应用于路由。如需实现路由功能，请参考 Angular、React 和 Vue 的路由指南，或适用于纯 JavaScript 项目的 ion-router。
使用 NavLink
NavLink 是一种与 Nav 交互的简化 API。开发者可以自定义组件、传递组件属性、修改路由动画方向或在导航时定义自定义动画。
模态框内的导航
Modal 可以使用 Nav 来提供独立于 URL 的线性导航。
备注
下面的示例使用了对 Nav 的引用以及公共方法 API 来推入和弹出视图。对于不需要这种细粒度访问和控制的实现，建议使用 NavLink。
接口
NavCustomEvent
虽然不是必需的，但此接口可用于替代 CustomEvent 接口，以便在此组件发出的 Ionic 事件中获得更强的类型支持。
interface NavCustomEvent extends CustomEvent {
target: HTMLIonNavElement;
}
属性
animated
| Description | If true, the nav should animate the transition of components. |
| Attribute | animated |
| Type | boolean |
| Default | true |
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 AnimationBuilder functions. |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
root
| Description | Root NavComponent to load |
| Attribute | root |
| Type | Function ｜ HTMLElement ｜ ViewController ｜ null ｜ string ｜ undefined |
| Default | undefined |
rootParams
| Description | Any parameters for the root component |
| Attribute | undefined |
| Type | undefined ｜ { [key: string]: any; } |
| Default | undefined |
swipeGesture
| Description | If the nav component should allow for swipe-to-go-back. |
| Attribute | swipe-gesture |
| Type | boolean ｜ undefined |
| Default | undefined |
事件
| Name | Description | Bubbles |
|---|---|---|
ionNavDidChange | Event fired when the nav has changed components | false |
ionNavWillChange | Event fired when the nav will change components | false |
方法
canGoBack
| Description | Returns true if the current view can go back. |
| Signature | canGoBack(view?: ViewController) => Promise<boolean> |
| Parameters | view: The view to check. |
getActive
| Description | Get the active view. |
| Signature | getActive() => Promise<ViewController ｜ undefined> |
getByIndex
| Description | Get the view at the specified index. |
| Signature | getByIndex(index: number) => Promise<ViewController ｜ undefined> |
| Parameters | index: The index of the view. |
getPrevious
| Description | Get the previous view. |
| Signature | getPrevious(view?: ViewController) => Promise<ViewController ｜ undefined> |
| Parameters | view: The view to get. |
insert
| Description | Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack. |
| Signature | insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | insertIndex: The index to insert the component at in the stack. component: The component to insert into the navigation stack. componentProps: Any properties of the component. opts: The navigation options. done: The transition complete function. |
insertPages
| Description | Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. |
| Signature | insertPages(insertIndex: number, insertComponents: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | insertIndex: The index to insert the components at in the stack. insertComponents: The components to insert into the navigation stack. opts: The navigation options. done: The transition complete function. |
pop
| Description | Pop a component off of the navigation stack. Navigates back from the current component. |
| Signature | pop(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | opts: The navigation options. done: The transition complete function. |
popTo
| Description | Pop to a specific index in the navigation stack. |
| Signature | popTo(indexOrViewCtrl: number ｜ ViewController, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | indexOrViewCtrl: The index or view controller to pop to. opts: The navigation options. done: The transition complete function. |
popToRoot
| Description | Navigate back to the root of the stack, no matter how far back that is. |
| Signature | popToRoot(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | opts: The navigation options. done: The transition complete function. |
push
| Description | Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams. |
| Signature | push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | component: The component to push onto the navigation stack. componentProps: Any properties of the component. opts: The navigation options. done: The transition complete function. |
removeIndex
| Description | Removes a component from the navigation stack at the specified index. |
| Signature | removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | startIndex: The number to begin removal at. removeCount: The number of components to remove. opts: The navigation options. done: The transition complete function. |
setPages
| Description | Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller. Navigation parameters can also be passed to the individual pages in the array. |
| Signature | setPages(views: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | views: The list of views to set as the navigation stack. opts: The navigation options. done: The transition complete function. |
setRoot
| Description | Set the root for the current navigation stack to a component. |
| Signature | setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | component: The component to set as the root of the navigation stack. componentProps: Any properties of the component. opts: The navigation options. done: The transition complete function. |
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
No CSS custom properties available for this component.
插槽
No slots available for this component.