NavController

优质
小牛编辑
141浏览
2023-12-01

注入NavController

  1. class MyComponent {
  2. constructor(nav: NavController) {
  3. this.nav = nav;
  4. }
  5. }

页面展示

页面创建可以使用@Page装饰器。

当页面被添加到navigation栈的时候,页面就被展示了,使用push()方法。

页面销毁时将从navigation栈中移除(使用pop()或者setRoot())。

生命周期

  1. @Page({
  2. template: 'Hello World'
  3. })
  4. class HelloWorld {
  5. onPageLoaded() {
  6. console.log("I'm alive!");
  7. }
  8. onPageWillLeave() {
  9. console.log("Looks like I'm about to leave :(");
  10. }
  11. }
  • onPageLoaded

    当页面加载时运行,每被创建并且添加到DOM树时执行一次。如果页面切换但是被缓存下来,再次进入此页面时,将不会触发该事件。

  • onPageWillEnter

    当页面即将进入并成为活动页时触发

  • onPageDidEnter

    当页面完全进入成为活动页面时执行,不管是否被缓存,都将执行。

  • onPageWillLeave

    页面即将成为非活动页时触发

  • onPageDidLeave

    当页面切换,该页面已经成为非活动页时触发

  • onPageWillUnload

    当页面即将被销毁时执行

  • onPageDidUnload

    当页面已经被销毁时执行

实例方法

setRoot(page,params,opts)

设置当前navigation栈的根节点

属性名称类型描述
pageType页面的类型
paramsobject传递到下一个视图的参数
optsobject过渡选项

返回:Promise

setPages(pages,opts)

用来设置navigation栈。你可以用它改变navigation的历史记录和切换动画。

  1. import {Page, NavController} from 'ionic-angular';
  2. import {Info} from '../info/info';
  3. import {List} from '../list/list';
  4. import {Detail} from '../detail/detail';
  5. export class Home {
  6. constructor(nav: NavController) {
  7. this.nav = nav;
  8. }
  9. setPages() {
  10. this.nav.setPages([{
  11. page: Info
  12. }, {
  13. page: List,
  14. params: {tags: 'css'}
  15. }, {
  16. page: Detail,
  17. params: {id: 325}
  18. }], {
  19. animate: true
  20. });
  21. }
  22. }
属性名称类型描述
pagesarray页面类型和参数组成的数组
optsobject过渡选项

返回:Promise

push(page,params,opts)

属性名称类型描述
pageType页面的类型
paramsobject传递到下一个视图的参数
optsobject过渡选项

返回:Promise

present(enteringView,opts)

添加组件到navigation栈中,例如:ActionSheet Alert Modal

  1. class MyClass{
  2. constructor(nav: NavController) {
  3. this.nav = nav;
  4. }
  5. presentModal() {
  6. let modal = Modal.create(ProfilePage);
  7. this.nav.present(modal);
  8. }
  9. }
属性名称类型描述
enteringViewViewController组件的控制器
optsobject过渡选项

返回:Promise

insert(insertIndex,page,params,opts)

插入一个视图到navigation栈。

属性名称类型描述
insertIndexnumber插入的索引
pageType页面的类型
paramsobject传递到下一个视图的参数
optsobject过渡选项

返回:Promise

insertPages(insertIndex,insertPages,opts)

属性名称类型描述
insertIndexnumber插入的索引
insertPagesarray页面类型和参数组成的数组
optsobject过渡选项

返回:Promise

pop(opts)

如果你想后退,那么可以调用该方法。

  1. class SecondView{
  2. constructor(nav:NavController){
  3. this.nav = nav;
  4. }
  5. goBack(){
  6. this.nav.pop();
  7. }
  8. }
属性名称类型描述
optsobject过渡选项

popToRoot(opts)

直接跳转到根导航,不管在navigite栈中有多少视图。

属性名称类型描述
optsobject过渡选项

popTo(view,opts)

将当前视图到该视图的历史记录弹出,并跳转到指定视图。

属性名称类型描述
viewViewController
optsobject过渡选项

remove(startIndex,removeCount,opts)

删除栈里指定索引段的元素。

属性名称类型描述
startIndexnumber从栈中删除页面的起始索引,默认为最后一页的索引
removeCountnumber从栈中删除多少个页面,默认为1
optsobject过渡选项

返回一个Promise

canSwipeBack()

返回一个布尔值,来表示当前是否支持滑动返回

canGoBack()

返回一个布尔值,来表示是否还有可返回的页面

getByIndex(index)

返回指定索引的组件

getActive()

返回当前活动页面的视图控制器

isActive(view)

返回一个布尔值,来表示该视图是否是当前活动页面。

getPrevious(view)

返回指定页面的视图控制器

first()

返回当前栈中第一个的视图控制器

last()

返回当前栈中最后一个的视图控制器

indexOf(view)

返回某个视图在栈中的索引

length()

返回栈的长度。

rootNav()

返回NavController