Question

Ionic4项目中我们可以使用Ionic4路由导航组件ion-nav对项目进行布局。

ion-nav官方文档地址:https://ionicframework.com/docs/api/nav

Nav is a standalone component for loading arbitrary components and pushing to new components on to the stack. Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we load a Nav component, and push other components to the stack, they will not affect the apps overall router. This fits use cases where you could have a modal, which needs it's own sub-navigation, but not make it tied to the apps URL.

ion-nav　属性(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 AnimateBuilder functions.
Type	((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined
root
Description	Root NavComponent to load
Attribute	root
Type	Function | HTMLElement | ViewController | null | string | undefined
rootParams
Description	Any parameters for the root component
Type	undefined | { [key: string]: any; }
swipeGesture
Description	If the nav component should allow for swipe-to-go-back.
Attribute	swipe-gesture
Type	boolean | undefined

ion-nav　事件(Events)

Name	Description
ionNavDidChange	Event fired when the nav has changed components
ionNavWillChange	Event fired when the nav will change components

ion-nav　内置方法(Methods)

canGoBack
Description	Returns true if the current view can go back.
Signature	canGoBack(view?: ViewController | undefined) => Promise<boolean>
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>
getPrevious
Description	Get the previous view.
Signature	getPrevious(view?: ViewController | undefined) => Promise<ViewController | undefined>
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(insertIndex: number, component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
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[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
pop
Description	Pop a component off of the navigation stack. Navigates back from the current component.
Signature	pop(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
popTo
Description	Pop to a specific index in the navigation stack.
Signature	popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
popToRoot
Description	Navigate back to the root of the stack, no matter how far back that is.
Signature	popToRoot(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
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(component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
removeIndex
Description	Removes a component from the navigation stack at the specified index.
Signature	removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
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: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
setRoot
Description	Set the root for the current navigation stack to a component.
Signature	setRoot(component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>