如何使用Ionic 3和NavController使用Angular 4將數據從一頁傳遞到另一頁。 我需要傳遞第一頁到第二頁的輸入並調用API

Question

我是Ionic 3和Angular 4的新手，請提供表單驗證代碼以及如何將數據從一頁傳遞到另一頁。 一個星期以來，我一直在掙扎。 請幫我 。 我被困住了。 提前致謝。

signup.html（接受條款的必要驗證和復選框驗證）

    <ion-content padding>

      <script src="cordova.js"></script>
      <script type="text/javascript"></script>

      <div class="container1">
          <div class="centerLogo"><h1><a href="#"><img src="images/logo.jpg"  /></a></h1></div>
          <ion-list>
          <form  #fm = "ngForm" (ngSubmit)="myQuotes(fm)" [formGroup]="myform">
          <ul id="tabs">

            <li (click)="showemail=false"><a id="tab2">Registration Form</a></li>

          </ul>
          <div class="form-group" id="tab2C" *ngIf="!showemail" >
        <ion-item>
          <ion-input type="text" placeholder="Username" name="username" ></ion-input>
        </ion-item>

        <ion-item>
          <ion-input type="text" placeholder="Name" name="name" ></ion-input>
        </ion-item>

         <ion-item>
          <ion-input type="text"  placeholder="Email" name="email" ></ion-input>
        </ion-item>

        <ion-item>
          <ion-label><span style="color: #747577">I accept all</span> <span style="color: #76a9eb"> terms and conditions </span> <br><span style="color: #747577">of my project.</span></ion-label>
          <ion-checkbox checked="false"></ion-checkbox>
        </ion-item>

        <button ion-button small clear color="dark" (click)="passwordPage()" full>Continue</button>
        </div>
       </form>
       <button ion-button small clear color="light" (click)="homePage()">Log In</button>

      </ion-list>
      </div>

      </ion-content>

signup.ts

    import { Component, Injectable } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { Http, Headers } from '@angular/http';
    import 'rxjs/add/operator/map';
    import { RequestOptions } from '@angular/http';
    import 'rxjs/operator/delay';
    import 'rxjs/operator/mergeMap';
    import 'rxjs/operator/switchMap';
    import {NgForm} from '@angular/forms';
    import { OtpPage } from '../otp/otp';
    import { HomePage } from '../home/home';
    import { PasswordPage } from '../password/password';
    import { FormsModule, ReactiveFormsModule }   from '@angular/forms';
    import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

    @IonicPage()
    @Component({
      selector: 'page-signup',
      templateUrl: 'signup.html',
    })
    export class SignupPage {

      fm: FormGroup;
      myForm: FormGroup;
      username:string = '';
      name:string = '';
      email:string = '';
      titleAlert:string = 'This field is required';

      constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, private fb: FormBuilder) {

        this.myForm = fb.group({
          username : [null, Validators.required],
          name : [null, Validators.required],
          email: ['', Validators.email],
          mobile: [null, Validators.required]
          });

      }

      ionViewDidLoad() {
        console.log('ionViewDidLoad SignupPage');
      }

      passwordPage(){
            this.navCtrl.push(PasswordPage);
       }

     homePage(){
      this.navCtrl.push(HomePage);
    }

     myQuotes(fm:NgForm) {
      return new Promise(resolve => {
                      let headers = new Headers({
                          'Content-Type': 'application/json'
                  });
                  console.log(fm.value["username"]);
                  var data = {
                      "username":fm.value["username"],
                      "name":fm.value["name"],
                      "email":fm.value["email"]
                  };
                  let options = new RequestOptions({ headers: headers });
                  console.log(options);
                  this.http.post('http://trailApi/rest/Register', data, options)
                      .map(res => res.json())
                      .subscribe(
                          data => {
                          console.log(data);
                          resolve(data);
                          if (data){
                      alert("Going to password page");            
                  }
                  else{
                       alert(" Please check your info");
                  }
                      },
                      err => {
                          console.log("ERROR:  quote-service:myQuotes()")
                          console.log(err);
                          alert(err._body);
                      }
                  );
                  });
      }
    }

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>

password.ts（需要將數據用戶名，名稱，電子郵件從home.ts傳遞到password.ts）

    import { Component, Injectable } from '@angular/core';
    import { IonicPage, NavController, NavParams, PopoverController } from 'ionic-angular';
    import { Http, Headers } from '@angular/http';
    import 'rxjs/add/operator/map';
    import { RequestOptions } from '@angular/http';
    import 'rxjs/operator/delay';
    import 'rxjs/operator/mergeMap';
    import 'rxjs/operator/switchMap';
    import { NgForm } from '@angular/forms';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

    @IonicPage()
    @Component({
        selector: 'page-password',
        templateUrl: 'password.html',
    })
    export class PasswordPage {

        constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, public popoverCtrl: PopoverController) {
        }

        ionViewDidLoad() {
            console.log('ionViewDidLoad PasswordPage');
        }

        public Credentials: FormGroup;

        ngOnInit() {
            this.Credentials = new FormGroup({});
            this.Credentials.addControl('Password', new FormControl('', [Validators.required]));
            this.Credentials.addControl('Confirmation', new FormControl('', [Validators.compose([Validators.required, this.validateAreEqual.bind(this)])]));
        }

        private validateAreEqual(fieldControl: FormControl) {
            return fieldControl.value === this.Credentials.get("Password").value ? null : { NotEqual: true };
        }

        myQuotes(fm: NgForm) {
            return new Promise(resolve => {
                let headers = new Headers({
                    'Content-Type': 'application/json'
                });
                console.log(fm.value["username"]);
                var data = {
                    "username": fm.value["username"],
                    "name": fm.value["name"],
                    "email": fm.value["email"],
                    "password": fm.value["mpin"],
                    "groupId": fm.value["groupid"]
                };
                let options = new RequestOptions({ headers: headers });
                console.log(options);
                this.http.post('http://trailApi/rest/Register', data, options)
                    .map(res => res.json())
                    .subscribe(
                    data => {
                        console.log(data);
                        resolve(data);
                        if (data) {
                            alert("SignUp is Successful");
                        }
                        else {
                            alert(" Please check your info");
                        }
                    },
                    err => {
                        console.log("ERROR:  quote-service:myQuotes()")
                        console.log(err);
                        alert(err._body);
                    }
                    );
            });
        }
    }

Answer 1

以下是示例代碼，我們將在其中將數據從主頁傳遞到導航中的關於頁面。 主頁上將有一個轉到頁面的按鈕，單擊該按鈕后，您的名字將通過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"
        });
  }

}

在主頁中，使用[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>

about.ts

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>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

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