Ionic 4 将参数传递给另一个页面

Question

请问如何在 ionic 4 中将参数传递给另一个页面？

因为 push 和 navy 参数功能在 ionic4 中不再起作用。

https://medium.com/@muthudevendra/ionic-sharing-data-between-pages-8d0412cb8f58

Answer 1

Page1.ts

public country: string;
  public email: string;
  public password: string;   

constructor(public nav: NavController) {}

goToAboutPage() {
    let params: any = {
      country: this.country,
      email: this.email,
      password: this.password
    }
    this.nav.navigateForward('/identity', { state: params }); // params to pass object/array
  }

Page2.ts

constructor(public router: Router){
if (router.getCurrentNavigation().extras.state) {
      const params = this.router.getCurrentNavigation().extras.state;
console.log(params.email)
console.log(params.password)
console.log(params.country) 
    }
}

Answer 2

在page.html中这样使用：

<ion-button routerLink="/yourAddress" [queryParams]="{ paramName : 'paramValue' }" ></ion-button>

在page.ts中这样使用：

import { NavController } from '@ionic/angular';
constructor(public navCtrl: NavController) {
    this.navCtrl.navigateForward('/yourAddress?paramName=' + this.paramValue);
}

Answer 3

阅读 Activated route 和 NavigationExtras，

在 page.ts 上有一个函数可能绑定到点击事件

goToNextpage() {
    let navigationExtras : NavigationExtras = { state: { dataToBePassed:this.param }};
    this.router.navigate(['/nextpage'], navigationExtras);
  }

下一个page.ts
import { ActivatedRoute, Router } from '@angular/router'; 并在构造函数中进行依赖注入，例如

constructor(
    private route: ActivatedRoute,
    private router: Router,
    ) { 
    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        
        this.var = this.router.getCurrentNavigation().extras.state.dataToBePassed;      
      }
      console.log(this.var); // will get you the data passed with key dataToBePassed
    });
  }

Ionic 4 将参数传递给另一个页面

Ionic 4 Pass parameter to another page

ionic-framework

ionic4