如何使用Ionic 3将数据从一页传递到另一页,使用NavController将数据从Angular 4传递到另一页。我需要通过输入的第1至第2页和callAPI

如何使用Ionic 3将数据从一页传递到另一页,使用NavController将数据从Angular 4传递到另一页。我需要通过输入的第1至第2页和callAPI,angular,ionic3,Angular,Ionic3,我是离子3和角4的新手。请提供表单验证代码以及如何将数据从一页传递到另一页。一个星期以来我一直在挣扎。请帮帮我。我被卡住了。提前谢谢 signup.html(接受条款的必要验证和复选框验证) password.html <ion-content padding> <!-- <ion-img width="100%" height="100%" src="../img/mobilePageBackground.png"></ion-img&

我是离子3和角4的新手。请提供表单验证代码以及如何将数据从一页传递到另一页。一个星期以来我一直在挣扎。请帮帮我。我被卡住了。提前谢谢

signup.html(接受条款的必要验证和复选框验证)

password.html

    <ion-content padding>
      <!--  <ion-img width="100%" height="100%" src="../img/mobilePageBackground.png"></ion-img> -->
    <div class="loginContainer">
    <div class="centerLogo"><h1><a href="#"><img src="img/logo.jpg" alt="" /></a></h1></div>
    <form  #fm = "ngForm" (ngSubmit)="myQuotes1(fm)" [formGroup]="Credentials">
    <ul id="tabs">

     <li (click)="showemail=false"><a id="tab2">Set your PIN</a></li>

    </ul>
    <div class="form-group" id="tab2C" *ngIf="!showemail">
     <div class="form-group">
       <ion-item>
        <ion-input type="password" formControlName="Password" placeholder="Enter Password"></ion-input>
     </ion-item>
     </div>
     <div class="form-group">
      <ion-item>
        <ion-input type="password" formControlName="Confirmation" placeholder="Confirm Password"></ion-input>
     </ion-item>
     <div class="help-block" *ngIf="Credentials.hasError('NotEqual', 'Confirmation')">
      NOT SAME
    </div>
     </div>
     <div class="btnRow">
       <input class="loginBtn" type="submit" id="phoneBtn" value="Continue" />
     </div> 
    </div>
    </form>
    </div>
    </ion-content>

下面是示例代码,我们将在其中将数据从主页传递到关于导航的页面。主页将有一个按钮转到“关于页面”,单击该按钮,您的姓名将通过navParams传递到“关于页面”,并显示在“关于页面”中。您还可以找到工作版本

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {appService} from '../../providers/app.service';
import {AboutPage} from '../../pages/about/about';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  aboutPage : any;

  constructor(public navCtrl: NavController, public appService : appService) {
    this.aboutPage=AboutPage;
  }

  goToAbout(){
    this.navCtrl.push(this.aboutPage, {
            userData: "Ajay kumar singh"
        });
  }

}
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  userData : any;
  constructor(public navCtrl: NavController, navParams : NavParams) {
    this.userData= navParams.data.userData;
  }

}
在主页中,使用[navParams][2]接收您从注册页面发送的值

userData : any;
constructor(public navParams: NavParams){
   this.userData= navParams.data.userData;
}
home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages. {{appService.service}}
  </p>

  <button ion-button (click)="goToAbout()">Go to About Page</button>
</ion-content>
<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  {{userData}}
</ion-content>
关于.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {appService} from '../../providers/app.service';
import {AboutPage} from '../../pages/about/about';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  aboutPage : any;

  constructor(public navCtrl: NavController, public appService : appService) {
    this.aboutPage=AboutPage;
  }

  goToAbout(){
    this.navCtrl.push(this.aboutPage, {
            userData: "Ajay kumar singh"
        });
  }

}
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  userData : any;
  constructor(public navCtrl: NavController, navParams : NavParams) {
    this.userData= navParams.data.userData;
  }

}
about.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages. {{appService.service}}
  </p>

  <button ion-button (click)="goToAbout()">Go to About Page</button>
</ion-content>
<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  {{userData}}
</ion-content>

关于
{{userData}}

so。。这会怎么样?有错误吗?我不知道如何将数据从一页传递到另一页。请给我一个方法,我做不到。不工作。请用上面提到的代码展示一个例子。在这个链接中,我构建了一个示例应用程序作为演示。在主页中,我添加了一个按钮“转到关于”,点击该按钮,您的姓名将被传递到关于页面,在关于页面中,您的姓名将被显示,并按照您的预期更新答案,请检查并告知我