【前端】ionic4 带参路由跳转

前言

Ionic3带参路由跳转

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

二、跳转后页面ActiviteLotteryPage.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 引用Router包
import { Router } from '@angular/router';

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

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

二、跳转后页面接收参数


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

constructor(public activeRoute: ActivatedRoute) {}

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

小结

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

感谢您的访问！

【前端】ionic4 带参路由跳转

前言

Ionic3带参路由跳转

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

二、跳转后页面ActiviteLotteryPage.ts

Ionic4带参路由跳转

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

二、跳转后页面接收参数

小结

猜你喜欢