Question

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

问题是我可以在console.log中看到正确的值（我在文本字段中写的内容）和＆＃34; undefined＆＃34;在同一页的同一行。

在我的第一页。我有

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中我看到了

exactWhatIWriteInNomeUtente home.ts:33

undefined home.ts:33

你有什么建议吗？

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

}

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

Answer 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')

Ionic v3将值传递给另一个页面

2 个答案: