ion-nav
Nav 是一个独立组件，用于加载任意组件并将新组件推送到堆栈上。
¥Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
与 Router Outlet 不同，Nav 不绑定到特定路由。这意味着，如果我们加载一个 Nav 组件，并将其他组件推送到堆栈中，它们不会影响应用的整体路由。例如，你不应将新组件推送到 ion-nav 并期望 URL 更新。这适合你可能有一个模式的用例，它需要自己的子导航，而不需要将其绑定到应用 URL。
¥Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. For example, you should not push a new component to ion-nav and expect the URL to update. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
ion-nav 不适合用于路由。相反，请参阅 Angular、React 和 Vue 的路由指南，或查看普通 JavaScript 项目的 ion-router 的路由指南。
¥ion-nav is not meant to be used for routing. Instead, see the routing guides for Angular, React, and Vue, or ion-router for vanilla JavaScript projects.
使用导航链接
¥Using NavLink
NavLink 是与 Nav 交互时的简化 API。开发者可以自定义组件、传递组件属性、修改路由动画的方向或在导航时定义自定义动画。
¥NavLink is a simplified API when interacting with Nav. Developers can customize the component, pass along component properties, modify the direction of the route animation or define a custom animation when navigating.
模态框内的导航
¥Navigation within a Modal
Modal 可以使用 Nav 提供独立于 URL 的线性导航。
¥Modal can use Nav to offer a linear navigation that is independent of the URL.
下面的示例使用对 Nav 的引用和公共方法 API 来推送和弹出视图。建议在不需要此级别的细粒度访问和控制的实现中使用 NavLink。
¥The example below uses a reference to Nav and the public method APIs to push and pop views. It is recommended to use NavLink in implementations that do not require this level of granular access and control.
接口
¥Interfaces
NavCustomEvent
虽然不是必需的，但可以使用此接口代替 CustomEvent 接口，以便使用从此组件触发的 Ionic 事件进行更强的键入。
¥While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.
interface NavCustomEvent extends CustomEvent {
target: HTMLIonNavElement;
}
属性
¥Properties
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 | animation |
| 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 | root-params |
| 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 |
事件
¥Events
| Name | Description | Bubbles |
|---|---|---|
ionNavDidChange | Event fired when the nav has changed components | false |
ionNavWillChange | Event fired when the nav will change components | false |
方法
¥Methods
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. |
getLength
| Description | Returns the number of views in the stack. |
| Signature | getLength() => Promise<number> |
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 阴影部分
¥CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
¥CSS Custom Properties
No CSS custom properties available for this component.
插槽
¥Slots
No slots available for this component.