【前端】ionic4 带参路由跳转

        前言

Ionic3带参路由跳转

    一、原始页面ActivityPage.ts中配置

   二、跳转后页面ActiviteLotteryPage.ts

Ionic4带参路由跳转

   一、原始页面ts文件的设置

   二、跳转后页面接收参数

小结

前言

    小编最近在进行ionic前端项目从3.2.0版本升级到4.6.0版本的迁移工作，之前版本的带参路由跳转的方法发生了一些变化，下面是两个版本中路由带参跳转的方法。

Ionic3带参路由跳转

    一、原始页面ActivityPage.ts中配置

   如下，共分为三个步骤，其中NavController使用的是push方法。

//1.引用包
   import { NavController, NavParams } from 'ionic-angular';

//2.声明变量
    constructor(public navCtrl: NavController,
    public navParams: NavParams){}

//3.方法中路由跳转
   this.navCtrl.push(ActiviteLotteryPage, {
      itemTicketInfo: ItemTicketInfo
    });

二、跳转后页面ActiviteLotteryPage.ts

 使用Navparams包，调用get方法获取参数。

import { NavParams } from 'ionic-angular';

constructor(public navParams: NavParams) {   
      this.data = navParams.get("itemTicketInfo"); 
}

 

Ionic4带参路由跳转

   一、原始页面ts文件的设置

1.传输字符串参数

//1 引用Router包
import { Router } from '@angular/router';

//2 声明变量
constructor( public router: Router) {

    //3 使用router.navigate方法跳转页面 
    this.router.navigate(['/integral-detail'], {
      queryParams: {
        page: 'week'
      }
    });
}  

2.传输对象参数  

 需要将对象序列化成字符串类型

this.router.navigate(['/integral-detail'], {
      queryParams: {
        object: JSON.stringify(object)
      }
    });

   二、跳转后页面接收参数

1.接收字符串参数 

import { ActivatedRoute, Params } from '@angular/router';

constructor(public activeRoute: ActivatedRoute) {}

this.activeRoute.queryParams.subscribe((params: Params) => {
      this.page = params['page'];
 });

2.接收对象参数

  需要重新定义一个变量，去接收字符串参数，然后反序列化为JSON对象。

objectReceive:any；

ionViewDidEnter(){  

   this.activeRoute.queryParams.subscribe((params: Params) => {
      this.objectReceive = params['object'];
   });
   this.objectReceive=JSON.parse(this.objectReceive);
}

小结

     ionic4更加倾向与Angular的使用方式，并且在运行ionic4的程序时，既可以使用“ionic serve”， 也可以使用“ng serve”，并且编译速度来讲，使用后者更快一些。当然小编更换node.js，升级到10.14版本后，运行“ionic serve”编译速度也会有所提升。

                                                                            感谢您的访问！