Question

我想将JSON对象传递给Ionic 2中的另一个页面。我尝试了以下，但我得到了异常

无法读取undefined的属性'user'。

下面 How to pass data in ionic2有人问同样的问题，但没有明确的，有效的答案。

 var jsonData =  JSON.parse(data);
 this.navCtrl.push(InfoPage, {jsonData});

InfoPage

export class InfoPage {

  jsonData = null;
  user = null;

  constructor(public navCtrl: NavController, private loadingCtrl: LoadingController, private navParams: NavParams) { 
    this.jsonData = this.navParams.get("jsonData");
  }

  ngOnInit() 
  {
     this.user = this.jsonData.user;
     console.log(this.user);
  }
}

Answer 1

不完全确定，但我认为这样的事情会起作用。另一方面，我认为使用中介服务会更好。

在您要发送数据的页面上：

let jsonData =  JSON.stringify(data);
this.navCtrl.push(InfoPage, {jsonData : jsonData});

在检索数据的页面上：

export class InfoPage {

   jsonData = null;
   user = null;

   constructor(private navParams: NavParams) { 
      this.jsonData = JSON.parse(this.navParams.get("jsonData"));
   }

   ngOnInit() {
     this.user = this.jsonData.user;
     console.log(this.user);
  }
}

让我再次提一下，最好将这些数据存储在所谓的PageService中，这将是整个页面中的单例。您可以使用它将数据从一个页面发送到另一个页面。如果你真的想坚持使用parse / stringify，那么我希望我的解决方案能够正常工作。请注意，我没有测试它。

第二种解决方案是使用服务，也许你可以将其用于其他用例：

export class PageService {

   public pageData: any;

}

您应该将此服务添加到根提供者数组中。之后，您可以在页面中使用它，如下所示：

第一页（发件人）

export class FirstPage {

   private jsonData: any = {user: 'saskia'};

   constructor(private pageService: PageService) {}

   goToInfoPage(): void {
      this.pageService.pageData = this.jsonData;
      this.navCtrl.push(InfoPage);
   }

}

InfoPage （收件人）

export class InfoPage {

   user: string;

   constructor(private pageService: PageService) {}

   ionViewWillEnter() {
     this.user = this.pageService.pageData.user;  
     console.log(this.user); //saskia
   }
}

我使用ionViewWillEnter生命周期挂钩，以确保在合适的时间获取数据

使用NavController传递JSON对象

1 个答案: