[英]How to pass data to another page in ionic-Angular
我是使用 ionic 的新手,我不知道如何将数据传递到另一个页面。
这是 html 文件,第 1 页。
<ion-header>
<ion-toolbar>
<ion-title>
<nav id="aboutnav">
<ion-img src="assets/img/logo.png"></ion-img>
<div id="aboutlist">
<ul>
<ion-icon (click)="home()" name="home"></ion-icon>
</ul>
</div>
</nav>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card *ngFor="let question of questions">
<ion-card-header>
<ion-card-title>
<h4>{{question.title}}</h4>
</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-text>
<h6>Rating:</h6>
</ion-text>
<div margin-vertical text-center>
<ion-radio-group [(ngModel)]="question.answer">
<ion-item>
<ion-radio value=0></ion-radio>
<ion-label> Not at all</ion-label>
</ion-item>
<ion-item>
<ion-radio value=2></ion-radio>
<ion-label>For some of the time</ion-label>
</ion-item>
<ion-item>
<ion-radio value=4></ion-radio>
<ion-label>For most of the time</ion-label>
</ion-item>
<ion-item>
<ion-radio value=5></ion-radio>
<ion-label>For all of the time</ion-label>
</ion-item>
</ion-radio-group>
</div>
</ion-card-content>
</ion-card>
<div margin-vertical text-center>
<ion-button (click)='getQuestionResults()'>SUBMIT</ion-button>
</div>
</ion-content>
这是第 1 页的 ts 文件。
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
export interface question {
title: string;
answer: Number[];
}
@Component({
selector: 'app-evaluation',
templateUrl: './evaluation.page.html',
styleUrls: ['./evaluation.page.scss'],
})
export class EvaluationPage implements OnInit {
questions: question[] = [];
constructor(private route: Router) { }
home(){
this.route.navigate(['/home']);
}
Result(){
this.route.navigate(['/result']);
}
ngOnInit() {
// Questions
for(let i = 1; i <= 1; i++) {
this.questions.push({
title: `Little interest or pleasure in doing things`,
answer: undefined
});
this.questions.push({
title: `Feeling down, depressed, or hopeless`,
answer: undefined
});
}
}
getQuestionResults(){
// no need to "get" the results
// they are already bound to the questions property
console.log(this.questions);
let sumA = 0;
for (const q of this.questions) {
sumA += Number(q.answer || 0);
}
if (sumA<=39) {
console.log("No Sign of Depression")
}
else if(sumA>=40 && sumA<=59) {
console.log("Mild Sign of Depression")
}
else if(sumA>=60 && sumA<=79) {
console.log("Moderate Sign of Depression")
}
else if(sumA>=80 && sumA<=100) {
console.log("Severe Sign of Depression")
}
else {
alert("Error!")
}
}
}
获取结果并打印在控制台上以供if-else使用后,我想将结果传递给另一个离子应用程序页面并在页面界面上打印它。 .
最好的方法是使用 rxjs 创建一个行为主题并订阅其他地方的数据:
ng g s services/depression-scale
像这样编辑那个文件
private depressionData = new BehaviorSubject<any>('')
public depressionData$ = this.depressionData.asObservable();
setDepressionScale(question: string){
this.depressionData.next(question)
}
导入此文件到您的离子成分
import { DepressionScaleService } from './../services/depression-scale/depression-scale.service'
在构造函数之前添加:
depressionScale: string;
在你的构造函数中
constructor(private dss:DepressionScaleService){}
编辑您的组件打字稿并添加调用以存储数据:
getQuestionResults(){
// no need to "get" the results
// they are already bound to the questions property
console.log(this.questions);
let sumA = 0;
for (const q of this.questions) {
sumA += Number(q.answer || 0);
}
if (sumA<=39){
this.dss.next('no sign of depression')
console.log("No Sign of Depression")
}
else if(sumA>=40 && sumA<=59){
this.dss.next('mild sign of depression')
console.log("Mild Sign of Depression")
}
else if(sumA>=60 && sumA<=79){
this.dss.next('moderate sign of depression')
console.log("Moderate Sign of Depression")
}
else if(sumA>=80 && sumA<=100){
this.dss.next('severe sign of depression')
console.log("Severe Sign of Depression")
}
else{
alert("Error!")
}
}
}
在要使用ngOnInit或ngAfterViewInit中的数据的组件上无关紧要。 或者如果它在同一个组件上仍然无关紧要 - 如果它是一个不同的组件,那么你必须导入服务并将它添加到新组件的构造函数中,如果它是你已经导入的相同组件。
ngOnInit(){
this.dss.depressionData$.subscribe((depressiondata)=>{
this.depressionScale=depressiondata
})
}
在组件的html上
{{depressionScale}}或将其视为原始 json {{depressionScale | json}}
阅读为什么以及它是如何工作的:
https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject
有一些方法可以做到,从最简单到更高级。 您可以开始将所有数据作为查询参数传递(我不喜欢这个选项)。
其他方法可以是构建一个将在两个组件中实例化的服务,例如,在移动到其他组件之前,您可以保存数据并从另一端使用ngOnInit()
。
另一方面,您始终可以将localStorage用作交换空间(将来可能对其他事物有用)。
RxJs还有其他选择,但如果你没有经验,我认为最好分开。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.