Ionic2实战-路由导航功能说明

前言

作为web，必不可少的就是页面之间的路由跳转，所有对于各大前端框架，路由导航就是必不可少的基础功能，下面我们就来看一下Ionic2之中如何进行页面直接的路由跳转。

路由页面步骤

1、导入需跳转的页面

import {LifestoreList} from "./lifestore/lifestore-list";

2、构造函数中引入NavController

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public homeService: HomeService,
              public modalCtrl: ModalController,
              public heyApp: AppService,
              public localStorageService: LocalStorageService) {

    let areaNameStr = this.localStorageService.get(AppGlobal.areaName)
    if(areaNameStr){
      this.areaName = areaNameStr;
    }

  }

3、执行跳转动作

this.navCtrl.push(LifestoreList, data)

其中data为可选参数，如无则不传，代表想要传递给下一页面的数据

4、目标页面接收参数

serviceType: string = "";
  lifestoreList: any = [];
  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public homeService: HomeService,
              public localStorageService: LocalStorageService) {

    this.serviceType = navParams.data;
  }

目标页面通过navParams.data来接收数据。

模态页面跳转步骤

模态页面即覆盖在当前页面上的一个浮层页面，不进行真正跳转，为路由的特殊情况，登录等场景需要使用。

1、导入需跳转的页面

import {LifestoreList} from "./lifestore/lifestore-list";

2、构造函数中引入ModalController

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public homeService: HomeService,
              public modalCtrl: ModalController,
              public heyApp: AppService,
              public localStorageService: LocalStorageService) {

    let areaNameStr = this.localStorageService.get(AppGlobal.areaName)
    if(areaNameStr){
      this.areaName = areaNameStr;
    }

  }

3、执行跳转动作

    let modal = this.modalCtrl.create(AreaList)
    modal.present();
    modal.onDidDismiss(data=>{
      let areaNameStr = this.localStorageService.get(AppGlobal.areaName)
      if(areaNameStr){
        this.areaName = areaNameStr;
      }
    });

4、退出模态页面

this.viewCtrl.dismiss();