如何使用Ionic 3将数据从一页传递到另一页,使用NavController将数据从Angular 4传递到另一页。我需要通过输入的第1至第2页和callAPI
我是离子3和角4的新手。请提供表单验证代码以及如何将数据从一页传递到另一页。一个星期以来我一直在挣扎。请帮帮我。我被卡住了。提前谢谢 signup.html(接受条款的必要验证和复选框验证) password.html如何使用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&
<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。。这会怎么样?有错误吗?我不知道如何将数据从一页传递到另一页。请给我一个方法,我做不到。不工作。请用上面提到的代码展示一个例子。在这个链接中,我构建了一个示例应用程序作为演示。在主页中,我添加了一个按钮“转到关于”,点击该按钮,您的姓名将被传递到关于页面,在关于页面中,您的姓名将被显示,并按照您的预期更新答案,请检查并告知我