Ionic 3使用navparams将对象传递到3页

Question

我是一个绝对的初学者，并且使用Ionic3自学 我有一个让我疯狂的问题，我希望有人可以提供帮助。

我有一个主 - 细节 - 细节设置，其中发生以下情况： 主页面有一个报告列表（取自JSON文件），单击该报告并进入详细信息页面，单击该页面，它会打开另一个页面，其中包含更多详细信息，而无需定义所有单独的部分。

我想做的只是将整个对象从第二页传递到第三页，以便我可以再次使用它的参数

母版页（报告）， 第二页（Reportmenu）， 第三页（GenOverview）

所以在主页和第二页之间传递很好，并且应该使用navparams（此处未显示），但我想使用相同的对象并将所有数据再次传递到第3页。 我认为这就像将它分配给一个新变量然后再使用navparams再次传递但是我得到未定义一样简单

export class ReportmenuPage {

name: any;
overallscore: any;
reportdate: any;
coach: any;
age: any;
TechOverall: any;
TactOverall: any;
PhysOverall: any;
PsychOverall: any;
Logo: any;
data2: any;

constructor(public navCtrl: NavController, public navParams: NavParams, 
public postsService: Posts, private toastCtrl: ToastController) {

this.overallscore = this.navParams.get('OverallScore');
this.reportdate = this.navParams.get('ReportDate');
this.name = this.navParams.get('Name');
this.coach = this.navParams.get('Coach');
this.age = this.navParams.get('Age');
this.TechOverall = this.navParams.get('TechOverall');
this.TactOverall = this.navParams.get('TactOverall');
this.PhysOverall = this.navParams.get('PhysOverall');
this.PsychOverall = this.navParams.get('PsychOverall');
this.Logo = this.navParams.get('Logo');
console.log(this.navParams.data);
this.data2 = this.navParams.data;


 }

 myClickHandlerOverview(data2) {
    this.navCtrl.push(GenOverviewPage, data2); 

所以这一切都很好，并给出了预期的输出 所以我现在要做的就是将它转到GenOverviewPage

  Here is the Reportmenu.html

      <ion-item (click)="myClickHandlerOverview(data2)" color="primary">
        <ion-icon name="arrow-dropright" item-end></ion-icon>
        GENERAL OVERVIEW
      </ion-item>

最后一点不起作用

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ReportmenuPage } from '../reportmenu/reportmenu';


@IonicPage()
@Component({
  selector: 'page-gen-overview',
  templateUrl: 'gen-overview.html',
})
export class GenOverviewPage {

 constructor(public navCtrl: NavController, public navParams: NavParams) {

   let data3 = this.navParams.data;
   console.log(data3); //this shows as {}



  }

   ionViewDidLoad() {
   console.log('ionViewDidLoad GenOverviewPage');
 }

}

我很确定我会被嘲笑，因为我认为这与我对对象/数组的理解不足以及它们是如何传递有关，但我已经搜索到了高低，无法理解我做错了什么。 / p>

以及为什么console.log（data3）显示第二个空数组，但正如您所见，我可以在第1页和第2页之间正常传输

非常感谢

Answer 1

在第二页中，您将数据保存在构造函数中包含的局部变量中。

let data2 = this.navParams.data;

您需要将其保存在类变量中以传递给myClickHandlerOverview。将其更改为：

this.data2 = this.navParams.data;

也可能需要将数据类型从数组更改为对象或any。

 data2: any;

更好的方法似乎是将其存储在公共提供者中。

Answer 2

归功于Suraj，非常简单 我错过了这个！

myClickHandlerOverview(data2) {
   this.navCtrl.push(GenOverviewPage, this.data2);