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

Question

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

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

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

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

所以在母版和第二页之间传递很好，并且可以使用 navparams（此处未显示）正常工作，但我想使用相同的对象并将所有数据再次传递到第三页。 我认为这就像将它分配给一个新变量然后使用 navparams 再次传递它一样简单，但我得到了 undefined

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');
 }

}

我很确定我会受到嘲笑，因为我认为这与我对对象/数组以及它们的传递方式缺乏了解有关，但我已经搜索了高低，无法掌握我做错了什么。

以及为什么 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);