ionic4页面跳转传参

ionic 页面跳转传参

在跳转前页面

首先引入一个包

import {NavController} from '@ionic/angular';

其次在构造函数中加载依赖

  constructor(public nav:NavController) {}

然后携带参数跳转页面

    this.nav.navigateRoot(['news'],{
      queryParams:{
        'page':"123",
        'wjw':"zheshiyigecanshu"
      }
    });

在接收参数页面 ts 中

在新页面获取参数,首先嘞，导入一个小包包

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

然后在构造函数中直接接受参数

   constructor(public activeRoute: ActivatedRoute) {
    this.activeRoute.queryParams.subscribe((params: Params) => {
      this.page = params['page'];
      this.page1 = params['wjw'];
      console.log("params:",this.page,this.page1)
    });
   }

OK了！

返回上一页

在新的页面添加一个按钮，点击返回按钮的时候，转到上一页

back(){
    this.nav.back()
}

Ionic 更新的速度就和中国发展速度一样，贼鸡儿快，说不准啥时候又变了、

还有一种方法，感觉这个好

前一页面

导包

import { Router } from '@angular/router';

注入依赖

constructor( public router: Router) {}

页面跳转

this.router.navigate(['news'], {
      queryParams: {
        'wjw': 'nihao'
      }
    });

第二个页面

也得导包，和上边一样

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

注入依赖

constructor(public activeRoute: ActivatedRoute ) {}

接受参数

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