ionic2中 NavController导航组件用法方法关于页面的导航
来源:互联网 发布:开淘宝店多久能赚钱啊 编辑:程序博客网 时间:2024/04/27 23:21
来自自己的理解和官网翻译
1.NavController概述
NavController是导航控制器组件的基类,如Nav和Tab。 您可以使用导航控制器导航到应用程序中的页面。 在基本级别,导航控制器是表示特定历史(例如,Tab)的页面的数组。 可以通过按压和弹出页面或在历史记录中的任意位置插入和删除这些数组来操纵整个应用程序。
当前页面是数组中的最后一个页面,或者堆栈的顶部,如果我们想到这样的话。 将新页面推入导航堆栈的顶部会导致新页面动画化,而弹出当前页面则将导航到堆栈中的上一页。
除非您使用像NavPush这样的指令,或者需要特定的NavController,否则大多数情况下,您将注入并使用最接近的NavController的引用来操作导航堆栈。
2.基本用法:
浏览应用程序的最简单方法是使用<ion-nav>组件创建和初始化新的导航控制器。 ion-nav扩展了NavController类。
import { Component } from `@angular/core`;import { StartPage } from './start-page';@Component( template: `<ion-nav [root]="rootPage"></ion-nav>`})class MyApp { // set the rootPage to the first page we want displayed public rootPage: any = StartPage; constructor(){ }}
3.注入NavController注入NavController将始终为您提供最近的NavController的实例,无论它是Tab还是导航。
在幕后,当Ionic实例化一个新的NavController时,它创建一个注射器,NavController绑定到该实例(通常是Nav或Tab),并将注入器添加到其自己的提供者。
相反,您可以注入NavController,并知道它是大多数情况下正确的导航控制器
import { NavController } from 'ionic-angular';class MyComponent { constructor(public navCtrl: NavController) { }}
4.从根组件导航如果你想控制从你的根应用程序组件导航怎么办? 您不能注入NavController,因为导航控制器的任何组件都是根组件的子项,因此无法注入。
通过向ion-nav添加引用变量,您可以使用@ViewChild获取Nav组件的一个实例,它是一个导航控制器(它扩展NavController):注意123点代码中注释的
//在这种情况下,我们正在等待导航与引用变量“#myNav”
如果您想从覆盖组件(popover,模态,警报等)导航,该怎么办? 在这个例子中,我们在我们的应用中展示了一个popover。 从popover中,我们将使用getRootNav()方法获取应用程序中的根NavController的引用。这种方法在当前页面刷新后在点击按钮返回就会报错说至少存在一个跟组件。原因是刷新后当前页面加载后并没有上一级页面,所以在返回跟组件的时候就出现了找不到上一级页面的问题。
视图在添加到导航堆栈中时创建。 对于像push()这样的方法,NavController接受使用@Component装饰的任何组件类作为其第一个参数。 然后,NavController编译该组件,将其添加到应用程序并将其动画化为视图。
默认情况下,页面被缓存并保留在DOM中,如果它们远离但仍在导航堆栈(例如push()中的退出页面)。 当从导航堆栈(在pop()或setRoot())上删除时,它们被销毁。
7.push一个视图
要将新视图推入导航堆栈,请使用push方法。 如果页面有<ion-navbar>,则后退按钮将自动添加到推送视图。也可以通过将对象传递给push方法来将数据传递给视图。 然后,推送视图可以通过NavParams类访问数据。
传递参数页面:
接收参数页面:
html:
8.移除一个视图:
要从堆栈中删除视图,请使用pop方法。 弹出视图将转换到上一个视图。
html:
效果:事件触发当前视图被移除,页面回到上一个页面视图
9.生命周期事件
生命周期事件在不同的导航阶段触发。 可以从任何从NavController中push/pop的组件类型中定义它们。
ionViewCanLeaveboolean/Promise<void>
boolean/Promise<void>在视图可以进入之前运行。 这可以在认证视图中用作“保护”,您需要在视图输入之前检查权限
视图可以离开时运行。 这可以在认证视图中用作“守卫”,您需要在视图离开之前检查权限10.Nav守卫
在某些情况下,开发人员应该能够控制离开和进入的视图。 为了允许这一点,NavController具有ionViewCanEnter和ionViewCanLeave方法。 与Angular路线守卫类似,但与NavController更加集成。 例如,如果您想阻止用户离开视图:
我们需要确保我们的navCtrl.push有一个catch来捕捉并处理错误。 如果你需要防止视图进入,你可以做同样的事情
11NavOptions
NavController上的一些方法允许自定义当前的转换。 为此,我们可以传递具有修改的属性的对象。
Property Value Description
boolean
Whether or not the transition should animate.animationstring
What kind of animation should be used.directionstring
The conceptual direction the user is navigating. For example, is the user navigating forward
, or back
?durationnumber
The length in milliseconds the animation should take.easingstring
The easing for the animation.12.实例成员canGoBack()
如果有一个有效的上一页我们可以弹回来,返回true。 否则返回false。
canSwipeBack()
如果可以使用滑动回来。 如果不可能返回,或者滑回不启用,那么这将返回false。 如果可以返回,并且启用滑动,那么这将返回true。
first()
返回此导航控制器堆栈中的第一个视图控制器。
getActive()
返回激活页面的视图控制器。
getActiveChildNav()
返回活动的子导航。
getActiveChildNavs()
返回活动子导航列表。
getByIndex(index)
Param Type Details
number
要获取的页面的索引。
ViewController
getPrevious(view)
返回给定视图控制器之前的视图控制器。 如果没有传入视图控制器,那么它将默认为活动视图。
Param Type Details
ViewController
viewController
Array<ViewController>
该导航控制器中的视图控制器堆栈。number
insert(insertIndex, page, params, opts)
在指定的索引中将一个组件插入到导航堆栈中。 如果您需要在导航堆栈中的任何位置添加组件,这将非常有用。
number
The index where to insert the page.索引 在哪里插入页面。
pagePage
|string
The component class or deeplink name you want to push onto the navigation stack.
要推送到导航堆栈的组件类或深层名称。
object
Any NavParams you want to pass along to the next view
您想传递给下一个视图的任何NavParams
.OPTIONAL
optsobject
Nav options to go with this transition
导航选项可以随着这个过渡。
.OPTIONAL
Promise
在指定的索引中将导入堆栈中的一个组件数组插入。 数组中的最后一个组件将被实例化为一个视图,并且动画化成为主动视图。
number
The index where you want to insert the page.
要插入页面的索引。
array
An array of objects, each with a page
and optionally params
property.
一组对象,每个都有一个页面和可选的params属性。
object
Nav options to go with this transition
导航选项可以随着这个过渡。
.OPTIONAL
Promise
返回转换完成后解决的承诺。
如果导航控制器正在激活转换,则返回。
Page
|string
The component class or deeplink name you want to push onto the navigation stack.
要推送到导航堆栈的组件类或深层名称。
object
Any NavParams you want to pass along to the next view
您想传递给下一个视图的任何NavParams。
.OPTIONAL
optsobject
Nav options to go with this transition
导航选项可以随着这个过渡。
.OPTIONAL
remove(startIndex, removeCount, opts)
从指定索引的导航堆栈中删除一个页面。number
The starting index to remove pages from the stack. Default is the index of the last page.
从堆栈中删除页面的起始索引。 默认是最后一页的索引。
number
The number of pages to remove, defaults to remove
要删除的页面数,默认为删除1
.OPTIONAL
object
Any options you want to use pass to transtion
您想要使用的任何选项都转移到转换
.OPTIONAL
Promise
removeView(viewController, opts)
从导航堆栈中删除指定的视图控制器。ViewController
The viewcontroller to remove
要删除的viewcontroller。
.OPTIONAL
optsobject
Any options you want to use pass to transtion.OPTIONAL
setPages(pages, opts)
设置当前导航堆栈的视图并导航到最后一个视图。 默认情况下,动画被禁用,但是可以通过将选项传递给导航控制器来启用它。您还可以将任何导航参数传递到阵列中的各个页面。Array<{page:any, params: any}>
An array of objects, each with a page
and optionally params
property to load in the stack
一组对象,每个对象都有一个页面,并且可选的params属性加载到堆栈中.
optsObject
Nav options to go with this transition.OPTIONAL
setRoot(pageOrViewCtrl, params, opts, done)
设置当前导航堆栈的根。
Page
|string
|ViewController
The name of the component you want to push on the navigation stack.
要在导航堆栈上推送的组件的名称。
object
Any NavParams you want to pass along to the next view
您想传递给下一个视图的任何NavParams。
.OPTIONAL
optsobject
Any options you want to use pass to transtion
您想要使用的任何选项都转移到转换
.OPTIONAL
doneFunction
Callback function on done.
Callback功能完成。
swipeBackEnabled
返回启用viewDidEnter
当组件已经完全成为活动组件时,可以观察到订阅。 viewDidLeave
当组件完全离开并且不再活动时,可以注册订阅。 viewDidLoad
当加载组件时可观察到要订阅。viewWillEnter
当组件即将加载时,可以注册订阅。 viewWillLeave
当组件即将离开时,可以注册订阅,不再活动。 viewWillUnload
当组件即将卸载和销毁时,可以注册订阅。
- ionic2中 NavController导航组件用法方法关于页面的导航
- ionic2- 导航页面
- Ionic2中的内置导航组件
- Ionic2 NavController模块的生命周期事件
- ionic2 子页面隐藏去掉底部tabs导航,子页面全占满显示方法
- NavigationController关于页面导航
- Silverlight中页面导航
- 一种新的页面导航方法
- 页面导航设计的快速验证方法
- 页面导航设计的快速验证方法
- 横向导航条页面居中的方法
- ionic2开发(一)NavController模块的生命周期事件
- BootStrap的导航组件
- WPF的页面导航
- .NET中面包屑导航的用法
- iOS中隐藏导航栏的方法
- 在页面海洋中导航
- ADF中页面导航总结
- 初学git
- Android开发——Protocol Buffer效率之高的原理介绍
- 深度学习(五十六)tensorflow项目构建流程
- 【面经笔记】排序算法的空间、时间复杂度
- not in和not exists查询显示Empty set
- ionic2中 NavController导航组件用法方法关于页面的导航
- poj-1061-青蛙约会-扩展的欧几里得算法的模板题
- 记录 调测RabitMQ有没有收到数据
- 素数判断
- EditPlus简单用法
- 网易云课堂JAVA入门编程题6-2
- 冒泡排序
- 二叉树的遍历 及前中序转换成后序遍历
- Java读取Excel并解析文本(并格式化输出)