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

Question

我需要你的帮助。我想将用户在文本字段中写入的数据传递到另一个页面。我的目标是使用在第二页中作为变量传递的数据在 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

未定义的家.ts:33

有什么建议吗？

Answer 1

您可以执行如下操作 ( source ):

主页.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 是我们传递给详细信息页面的数据。

细节.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);
      }
    });
  }

}

这样您就可以只针对要传输的数据修改代码!