时间戳

首页 > 解决方案 > 如何将数据从 IONIC 5 中的输入表单传递到另一个页面

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

问题描述

我有一个带有3 个文本输入的输入表单。我唯一想要的就是将这 3 个数据发送到另一个我称为“身份”的页面。我想知道如何使用 ionic 5 将这 3 个数据发送到另一个页面。我想逐步创建签名样式。有人可以帮忙吗？

注册页面.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>

注册页面.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
    })
  }


}

标签： ionic-frameworkionic5

解决方案

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

利用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;

实时更新方法三：

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

推荐阅读