ion-nav
Nav 是一个独立的组件，用于加载任意组件并将新组件推送到堆栈中。
与路由器出口不同，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 |
| 类型 | 布尔值 |
| 默认值 | true |
animation
| 描述 | 默认情况下，ion-nav 根据模式（iOS 或材料设计）为页面之间的转换提供动画。但是，此属性允许使用 AnimationBuilder 函数创建自定义转换。 |
| 属性 | 未定义 |
| 类型 | ((baseEl: any, opts?: any) => Animation) ｜ 未定义 |
| 默认值 | 未定义 |
root
| 描述 | 要加载的根 NavComponent |
| 属性 | root |
| 类型 | 函数 ｜ HTMLElement ｜ ViewController ｜ null ｜ 字符串 ｜ 未定义 |
| 默认值 | 未定义 |
rootParams
| 描述 | 根组件的任何参数 |
| 属性 | 未定义 |
| 类型 | 未定义 ｜ { [key: string]: any; } |
| 默认值 | 未定义 |
swipeGesture
| 描述 | 如果导航组件应允许滑动返回。 |
| 属性 | swipe-gesture |
| 类型 | 布尔值 ｜ 未定义 |
| 默认值 | 未定义 |
事件
| 名称 | 描述 | 冒泡 |
|---|---|---|
ionNavDidChange | 导航更改组件时触发的事件 | false |
ionNavWillChange | 导航将要更改组件时触发的事件 | false |
方法
canGoBack
| 描述 | 如果当前视图可以返回，则返回 true。 |
| 签名 | canGoBack(view?: ViewController) => Promise<boolean> |
getActive
| 描述 | 获取活动视图。 |
| 签名 | getActive() => Promise<ViewController ｜ 未定义> |
getByIndex
| 描述 | 获取指定索引处的视图。 |
| 签名 | getByIndex(index: number) => Promise<ViewController ｜ 未定义> |
getLength
| 描述 | 返回堆栈中的视图数量。 |
| 签名 | getLength() => Promise<number> |
getPrevious
| 描述 | 获取上一个视图。 |
| 签名 | getPrevious(view?: ViewController) => Promise<ViewController ｜ 未定义> |
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 自定义属性。
插槽
此组件没有插槽。