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

【问题标题】：Ionic 4 How to get data from another pageIonic 4 如何从另一个页面获取数据
【发布时间】：2026-02-22 15:50:01
【问题描述】：

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

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

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

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

this.navParams.get('x');

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

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

【问题讨论】：

标签： angular ionic4

【解决方案1】：

您可以使用 navigaionExtras 来实现这一点

第 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;
          }
        });
      }

【讨论】：

【解决方案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方法。

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

第三

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

使用ionic local storage

【讨论】：