如何將數據傳遞到 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

最好的方法是使用 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

https://rxjs.dev/guide/subject

Answer 2

有一些方法可以做到，從最簡單到更高級。 您可以開始將所有數據作為查詢參數傳遞（我不喜歡這個選項）。

其他方法可以是構建一個將在兩個組件中實例化的服務，例如，在移動到其他組件之前，您可以保存數據並從另一端使用ngOnInit() 。

另一方面，您始終可以將localStorage用作交換空間（將來可能對其他事物有用）。

RxJs還有其他選擇，但如果你沒有經驗，我認為最好分開。