Ionic 4 如何从另一个页面获取数据

Question

我正在浏览页面并向页面发送数据。我想知道如何获取发送到页面的数据？ .

示例：在 ionic 3 中，我们像这样推送页面并发送数据

this.navCtrl.push(Page, {x:x})

在其他页面中，我们从 navParams 中获取日期，例如

this.navParams.get('x');

我需要知道如何在 ionic 4 中获取数据？我正在像这样浏览页面和数据

details(y){
 this.navCtrl.navigateForward('/packagedetails',{y:y});
}

Answer 1

您可以使用导航 Extras 来实现此目的

第 1 页：

  let navigationExtras: NavigationExtras = {
          state: {
            x: x
          }
        };
        this.router.navigate(['details'], navigationExtras);

第 2 页：

  constructor(private route: ActivatedRoute, private router: Router) {
        this.route.queryParams.subscribe(params => {
          if (this.router.getCurrentNavigation().extras.state) {
            this.data = this.router.getCurrentNavigation().extras.state.x;
          }
        });
      }

Answer 2

他们有很多方法可以做到这一点。这是三个：

第一个

这是另一个页面的单页参数，但如果用户关闭应用程序，则不会保存任何内容（不确定 100%，但如果我没记错的话，它不是）：

第 1 页：

import {Router} from "@angular/router" 

@Component(thingsThatIsIt)

export class Page1Page{
  constructor(private router: Router,OthersThingsInYourConstructor){thingsThatIsIt} 


  FunctionToGoOnPage2(someParameters) //someParameters is an JS object (like JSON for exemple)
  {
    this.router.navigate(["Page2",someParameters])
  }
}

第 2 页：

import {ActivatedRoute} from "@angular/router" 

@Component(thingsThatIsIt)

export class Page2Page{
  constructor(private route: ActivatedRoute,OthersThingsInYourConstructor)
  {
    this.route.params.subscribe(params => {
      console.log(params)
      FunctionThatDealWithParameters(params)
    })
  }




  FunctionThatDealWithParameters(someParameters) //someParameters is an JS object (like JSON for exemple)
  {
    //code to use your parameters
  }
}

第二个

对于许多其他页面来说，这是一页，但如果用户关闭应用程序，则不会保存任何内容：

制作服务：ionic generate service

在此服务中，创建一些属性，以及一些获取和设置方法。

在需要您服务的页面中，获取或设置方法，您只需导入它，然后调用您的 get/set 方法（顺便说一句，您需要的方法）

第三

对于许多其他页面来说，这是一个页面，所有内容都已保存，即使用户关闭了他的应用程序：

使用 ionic local storage

Ionic 4 如何从另一个页面获取数据

Ionic 4 How to get data from another page

angular

ionic4

第一个

第二个

第三