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

Question

我有一个带有 3 文本输入的输入表单。我唯一想要的就是将这 3 个数据发送到另一个我称为“身份”的页面。我想知道如何使用 ionic 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

有多种方法可以将数据从一页传递到另一页。 方法一：

使用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)
  });
}

方法二：

创建一个GlobalDataProviderService。 运行命令：

离子生成服务全局数据

在 Globaldata 类中：

public static userObject:any;

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

Page 1:

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

Page 2:

导入这个类：

在 Constructor 或 lifeCycle Hook 中。

yourVaribale = GlobaldataService.usrObject;

实时更新方法三：

查看我的其他答案：Real Time Data Update

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