传递JSON对象与NavController

Question

我想一个JSON对象传递到另一个页面的离子2. 我试图像下面，但我得到的异常

Cannot read property 'user' of undefined.

这里 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生命周期挂钩，以确保数据在正确的时间获得