我想将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);
}
}
答案 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
生命周期挂钩,以确保在合适的时间获取数据