ion-nav

shadow

Nav 是一个独立的组件，用于加载任意组件并将新组件推入堆栈。

与 Router Outlet 不同，Nav 不绑定到特定的路由器。这意味着如果我们加载一个 Nav 组件并将其他组件推入堆栈，它们不会影响应用的整体路由器。例如，你不应将新组件推入 ion-nav 并期望 URL 更新。这适用于模态框需要自己的子导航而不使其与应用 URL 绑定的用例。

备注

ion-nav 不应用于路由。相反，请参阅适用于 vanilla JavaScript 项目的 Angular、React 和 Vue 的路由指南，或 ion-router。

使用 NavLink

NavLink 是与 Nav 交互时的简化 API。开发者可以自定义组件、传递组件属性、修改路由动画的方向或在导航时定义自定义动画。

模态框内导航

模态框可以使用 Nav 来提供独立于 URL 的线性导航。

备注

下面的示例使用对 Nav 的引用和公共方法 API 来推入和弹出视图。建议在不需要这种级别精细访问和控制的实现中使用 NavLink。

接口

NavCustomEvent

虽然不是必需的，但此接口可以替代 CustomEvent 接口，为此组件发出的 Ionic 事件提供更强的类型支持。

interface NavCustomEvent extends CustomEvent {
  target: HTMLIonNavElement;
}

属性

animated

说明	If true, the nav should animate the transition of components.
属性	animated
类型	boolean
默认值	true

animation

说明	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.
属性	undefined
类型	((baseEl: any, opts?: any) => Animation) ｜ undefined
默认值	undefined

root

说明	Root NavComponent to load
属性	root
类型	Function ｜ HTMLElement ｜ ViewController ｜ null ｜ string ｜ undefined
默认值	undefined

rootParams

说明	Any parameters for the root component
属性	undefined
类型	undefined ｜ { [key: string]: any; }
默认值	undefined

swipeGesture

说明	If the nav component should allow for swipe-to-go-back.
属性	swipe-gesture
类型	boolean ｜ undefined
默认值	undefined

事件

Name	说明	冒泡
ionNavDidChange	Event fired when the nav has changed components	false
ionNavWillChange	Event fired when the nav will change components	false

方法

canGoBack

说明	Returns true if the current view can go back.
签名	canGoBack(view?: ViewController) => Promise<boolean>
参数	view: The view to check.

getActive

说明	Get the active view.
签名	getActive() => Promise<ViewController ｜ undefined>

getByIndex

说明	Get the view at the specified index.
签名	getByIndex(index: number) => Promise<ViewController ｜ undefined>
参数	index: The index of the view.

getPrevious

说明	Get the previous view.
签名	getPrevious(view?: ViewController) => Promise<ViewController ｜ undefined>
参数	view: The view to get.

insert

说明	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.
签名	insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>
参数	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

说明	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.
签名	insertPages(insertIndex: number, insertComponents: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>
参数	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

说明	Pop a component off of the navigation stack. Navigates back from the current component.
签名	pop(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>
参数	opts: The navigation options. done: The transition complete function.

popTo

说明	Pop to a specific index in the navigation stack.
签名	popTo(indexOrViewCtrl: number ｜ ViewController, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>
参数	indexOrViewCtrl: The index or view controller to pop to. opts: The navigation options. done: The transition complete function.

popToRoot

说明	Navigate back to the root of the stack, no matter how far back that is.
签名	popToRoot(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>
参数	opts: The navigation options. done: The transition complete function.

push

说明	Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams.
签名	push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>
参数	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

说明	Removes a component from the navigation stack at the specified index.
签名	removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>
参数	startIndex: The number to begin removal at. removeCount: The number of components to remove. opts: The navigation options. done: The transition complete function.

setPages

说明	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.
签名	setPages(views: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>
参数	views: The list of views to set as the navigation stack. opts: The navigation options. done: The transition complete function.

setRoot

说明	Set the root for the current navigation stack to a component.
签名	setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>
参数	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 阴影部分。

CSS 自定义属性

该组件没有可用的 CSS 自定义属性。

插槽

该组件没有可用的插槽。