前言
小编最近在进行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”编译速度也会有所提升。
感谢您的访问!