使用NavController传递JSON对象

时间:2017-01-04 08:48:43

标签: json angular ionic2

我想将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);
  }
}

1 个答案:

答案 0 :(得分: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生命周期挂钩,以确保在合适的时间获取数据