如何在ionic-Angular中将数据传递到另一个页面

Question

我是使用 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后，我想将结果传递给另一个离子应用程序页面并在页面界面上打印。 .

Answer 1

有一些方法可以做到这一点，从最简单到更高级。您可以开始将所有数据作为 查询参数 传递（我不喜欢这个选项）。

其他方式可以构建一个服务，它将在两个组件中实例化，在移动到其他组件之前，您可以保存数据并在ngOnInit() 上从另一端消费。

另一方面，您始终可以将 localStorage 用作交换空间（将来可能对其他事物有用）。

RxJs 还有其他选择，但如果您没有经验，我认为最好分开。

Answer 2

最好的方法是使用 rxjs 创建一个behaviorsubject 并在别处订阅数据：

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 中的数据的组件上并不重要。或者如果它在 same component 上仍然无关紧要 - 如果它是不同的组件，那么您必须 import service 并将其添加到新 组件的构造函数（如果它与您已经使用的组件相同）导入它。

ngOnInit(){
this.dss.depressionData$.subscribe((depressiondata)=>{
this.depressionScale=depressiondata
})
}

在组件的html上

{{depressionScale}} 或将其视为原始 json {{depressionScale | json}}

阅读关于为什么和如何它的工作原理：

https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject

https://rxjs.dev/guide/subject