Ionic 2実戦-ルーティング機能説明

前言
Webとしては、ページ間のルーティングジャンプが不可欠であり、各フロントエンドフレームワークに対してルーティングナビゲーションが不可欠な基礎機能である.Ionic 2では、ページ直接のルーティングジャンプをどのように行うかを見てみましょう.
ルーティングページステップ
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();