如何在不使用离子的this.navCtrl.push（PostPage，data）的情况下将数据传递到另一个页面

Posted 2021-03-30

假设我已将用户登录用户名作为数据传递给php api url，以便从数据库中获取用户详细信息

let data = {
  username: this.username
     };

this.http.post('http://onitor.com/api/retrieve_data.php',data, options)

当数据以json格式返回时，

.map(res => res.json())
  .subscribe(res => {
   loader.dismiss()
    this.items=res.server_response;
    console.log(this.items);
    });
    });

我想将这些数据传递给PostPage，我不想使用像这样的推送方法

this.navCtrl.push(PostPage, data); 

我该怎么做？我还不熟悉离子。

谢谢。

答案

你可以使用服务。在该服务中写入http请求代码并使用Promise返回数据。在服务中声明全局变量并在整个应用程序中的任何位置访问它

在您的service.ts文件中，

data: any;

retrieveData(){
    return new Promise(resolve => {
      this.http.post("http://onitor.com/api/retrieve_data.php", data)
      .subscribe(data => {
        this.data = data;
        resolve(data);
      });
    });
}  

getData(){
  return this.data;
}

在你的component.ts中，

postData(){
    let postParams = {

    }
    this.myService.retrieveData(postParams)
      .then(data => {
        console.log("Response: ", data);
      })
      .catch(error => {
        console.log("Error: ", error)
    });
}

getData(){
  this.myService.getData();
}

另一答案

Tonye

您可以将数据存储在localStorage中。请看这个链接：https://answerdone.blogspot.com/2018/03/how-to-store-and-use-data-globally-in.html

另一答案

尝试将其存储在存储中，并从应用程序中的任何位置存储。

在你的第一页

// set it in storage
setData() {
    window.localStorage.setItem('account', JSON.stringify(data));
}

在你的第二页

// get it from storage
// create account variable where you will pass the data
account: any;

getData() {
    this.account = window.localStorage.getItem('account');

    //check on how you will access the username
    console.log(this.account);
}