Ionic v3 将值传递到另一个页面答案

【问题标题】：Ionic v3 pass value to another pageIonic v3 将值传递到另一个页面
【发布时间】：2019-07-03 19:59:26
【问题描述】：

我需要你的帮助。我想将用户在文本字段中写入的数据传递到另一个页面。我的目标是使用第二页中作为变量传递的数据在 console.log 中打印。

问题是我可以在 console.log 中看到正确的值（我在文本字段中写的内容）和同一页面同一行的“未定义”。

在我的第一个 page.ts 我有

export class LoginPage {

public nomeUtente: string;


constructor(
  public navCtrl: NavController,

) {

}

nomeScelto() {
  let nomeUtente = this.nomeUtente;
  this.navCtrl.push(HomePage, {data: nomeUtente});
    return {
      data :nomeUtente
    }
}

并在对应的html中

    <ion-content padding>
  <form [formGroup]="loginForm" (submit)="loginUser()" novalidate>

    <ion-item>
      <ion-label stacked>Codice Matrimonio</ion-label>
      <ion-input formControlName="email" type="text" placeholder="Inserisci qui il codice"
        [class.invalid]="!loginForm.controls.email.valid && blur"></ion-input>
    </ion-item>
    <br>
    <br>
    <ion-item>
      <ion-label stacked>Nome</ion-label>
      <ion-input type="text" [(ngModel)]="nomeUtente" placeholder="Inserisci il tuo nome" [ngModelOptions]="{standalone: true}"></ion-input>
    </ion-item>
    <br>
    <br>
    <button ion-button block type="submit" [disabled]="!loginForm.valid">
      Accedi!
    </button>
  </form>
</ion-content>

所以，现在我的主页中有这个

    export class HomePage {

  nomeUtente: any;

constructor(
  private camera: Camera,
  public navCtrl: NavController,
  alertCtrl: AlertController,
  public zone: NgZone,
  public navParams: NavParams,

) {
  this.alertCtrl = alertCtrl;

  let nomeUtente = navParams.get('data');

  console.log(nomeUtente);
  }

在 console.log 中我看到了

exactlyWhatIWriteInNomeUtente home.ts:33

未定义的 home.ts:33

你有什么建议吗？

【问题讨论】：

尝试使用navParams.data，如果您仍然不确定，请控制台导航参数，您可以看到对象，然后您可以轻松获取数据值（如果存在）。
好的，如果我使用 navParams.data 或 console.log(navParams.data) 我可以看到我在输入文本中写的内容以及一个空的 {}。有办法只显示第一个日志而不显示空日志吗？
你只有控制台navParams.data。那为什么要打印两个日志？请检查您的文件中是否包含多个 console.log。
我已经检查了一遍又一遍.. 在控制台中我可以看到两个日志引用同一行代码，一个是正确的，另一个是未定义的或 { } 取决于我如何编码.
请试试这个this.navParams.data然后告诉我

标签： javascript ionic-framework

【解决方案1】：

您可以执行以下操作 (source)：

home.page.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  user = {
    name: 'Simon Grimm',
    website: 'www.ionicacademy.com',
    address: {
      zip: 48149,
      city: 'Muenster',
      country: 'DE'
    },
    interests: [
      'Ionic', 'Angular', 'YouTube', 'Sports'
    ]
  };

  constructor(private router: Router) { }

  openDetailsWithQueryParams() {
    let navigationExtras: NavigationExtras = {
      queryParams: {
        special: JSON.stringify(this.user)
      }
    };
    this.router.navigate(['details'], navigationExtras);
  }
}

这里的navigationExtras 是我们传递给详细信息页面的数据。

details.page.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {

  data: any;

  constructor(private route: ActivatedRoute, private router: Router) {
    this.route.queryParams.subscribe(params => {
      if (params && params.special) {
        this.data = JSON.parse(params.special);
      }
    });
  }

}

这样您就可以只为您要传输的数据修改代码！

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含essential parts of the answer 并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 Answers that are little more than a link may be deleted
该链接中有 3 个选项，您选择复制描述为 “选项更像是丑陋的骇客，不推荐”的选项？？
是的，我知道。这是为了理解的目的！我不打算在这里编写编码标准...

【解决方案2】：

您可以在 Ionic 3 中直接将值从一个页面传递到另一个页面。我将发布一些示例代码。

要将数据从一个页面传递到另一个页面，

this.navCtrl.push("Pagename",{keyname: value});

例如：

this.navCtrl.push("Startpage",{userdata:this.userdatapass});

要获取目标页面上的数据，

variable_name = this.navParams.get('keyname');

例如：

this.userdataget = this.navParams.get('userdata')

【讨论】：