如何将数据从IONIC 5中的输入表单传递到另一个页面

Question

我有一个3文本输入的输入表单。我唯一想要的是将这3个数据发送到另一个页面，我称之为"；身份"；。我想知道如何使用Ion 5将这3个数据发送到另一个页面我想创建一个循序渐进的签名样式。有人能帮忙吗？

REGISTER.PAGE.HTML

<ion-content fullscreen="true" class="background-contact">
<div class="fixed">

<div class="div-3">
<div align="center">
<b>IDENTIFICATION</b>
</div>

<ion-label position="stacked" class="title">E-mail</ion-label>
<div align="center" class="input-class">
<ion-input autofocus="true" ngModel  name="email" type="email" placeholder="informez votre email"></ion-input>
</div> 

<div class="line">
<ion-label position="stacked" class="title">Mot de passe</ion-label>
<div align="center" class="input-class">
<ion-input ngModel name="password" type="password" placeholder="informez votre mot de passe"></ion-input>
</div>
</div>

<!-- <div class="line">
<ion-label position="stacked" class="title">Téléphone</ion-label>
<div align="center" class="input-class">
<ion-input autofocus="true" ngModel name="phone" type="text"  placeholder="Tapez votre numéro de tel" (keypress)="numberOnlyValidation($event)"></ion-input>
</div>
</div> -->

<div class="line">
<ion-label position="stacked" class="title">Pays</ion-label>
<div align="center" >
<ion-select  cancelText="Fermer" okText="Confirmer" ngModel name="cod_country">
<ion-select-option value="">Dans quel pays êtes-vous?</ion-select-option>
<ion-select-option value="{{item?.id}}" *ngFor="let item of country">{{item?.name}}</ion-select-option>
</ion-select>
</div>
</div>

<div class="line">
<div align="center" class="input-class">
<ion-button  (click)="goToAboutPage()"  expand="block" color="primary"><ion-spinner *ngIf="loading"></ion-spinner> CONFIRMER <ion-icon name="checkmark-done"></ion-icon></ion-button>
</div>
</div>
</div>
</div>
</ion-content>

RESGISTER.PAGE.TS

import { Component, OnInit } from '@angular/core';
import { AlertController, NavController, ToastController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { NgForm } from '@angular/forms';
import { AlertService } from 'src/app/services/alert.service';
import {IdentityPage} from 'src/app/identity/identity.page';
import { Router } from '@angular/router';

@Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
loading: boolean;// loading chamando
country: any;
password:any;
private cod_country;
constructor(
private authService: AuthService,
private navCtrl: NavController,
private alertService: AlertService,
public alertController: AlertController,
private toast: ToastController,
private router: Router,

) { 
this.getCountry();
}

ngOnInit() {
}
//Get all country list
getCountry(){
this.authService.getCountry().subscribe(country=>{
this.country = country;

})
} 
// navigate to about page
goToAboutPage(data) {
this.router.navigate(['/identity'],{
queryParams:data
})
}

}

Answer 1

有多种方法可以将数据从一个页面传递到另一个页面。方法1:

使用Angular Router with params

Page 1:

goToNewPage(){
this.router.navigate(['/identity'],{
queryParams: JSON.Stringify(data)
})
}

Page 2:

import {ActivatedRoute} from '@angular/router';
constructor(private activatedRoute: ActivatedRoute){
this.activatedRoute.queryParams.subscribe(params => {
console.log(params)
});
}

方法2:

创建GlobalDataProviderService。运行命令：

离子生成服务全局数据

在Globaldata类中：

public static userObject:any;

在两个页面上导入此类并初始化变量。

Page 1:

goToNewPage(){
GlobaldataService.userObject = YourData;
this.router.navigate(['/identity'])
}

Page 2:

导入此类：

构造函数或生命周期挂钩内部。

yourVaribale = GlobaldataService.usrObject;

实时更新方法3：

查看我的其他答案：实时数据更新

Answer 2

Page 1 html code

<ion-row>
<ion-col size="12">
<ion-item>
<ion-label position="stacked">E-Mail</ion-label>
<ion-input type="email" [(ngModel)]="email"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Password</ion-label>
<ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>
<ion-item>
<ion-label>Country</ion-label>
<ion-select placeholder="Select Country" [(ngModel)]="country">
<ion-select-option value="India">India</ion-select-option>
<ion-select-option value="Usa">Usa</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col size="12" class="ion-text-center">
<ion-button (click)="goToAboutPage()" expand="block" shape="round">
Click me
</ion-button>
</ion-col>
</ion-row>

Page 1 ts code

public country: string;
public email: string;
public password: string;   
constructor(public nav: NavController) {}
goToAboutPage() {
let params: any = {
country: this.country,
email: this.email,
password: this.password
}
this.nav.navigateForward('/identity', { state: params }); // params to pass object/array
}

Page 2

constructor(public router: Router){
if (router.getCurrentNavigation().extras.state) {
const params = this.router.getCurrentNavigation().extras.state;
console.log(params.email)
console.log(params.password)
console.log(params.country) 
}
}