我需要你的帮助。我想将用户在文本字段中写入的数据传递到另一个页面。我的目标是使用在第二页中作为变量传递的数据在 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
有什么建议吗?
最佳答案
您可以执行如下操作 ( 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);
}
});
}
}
这样您就可以只针对要传输的数据修改代码!
关于javascript - Ionic v3 将值传递给另一个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48316251/